[Ionic-React] Routing 하기

1. 개요

리액트의 것과 다를 것이 없는 개념이다.

spa 방식에서 페이지를 routing하여 다른 내용을 보여준다.

2. 코드 상세

  //App.tsx
  <IonApp>
    <IonReactRouter>
      <IonRouterOutlet>
        <Route exact path="/home" component={Home} />
        <Route exact path="/">
          <Redirect to="/home" />
        </Route>
        <Route path="/example" component={Example} />
      </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>

//Home.tsx
<IonPage>
  <IonHeader>
    <IonToolbar>
      <IonTitle>Hello World!</IonTitle>
    </IonToolbar>
  </IonHeader>
  <IonContent className="ion-padding">
    <IonButton routerLink="/example">Click Me!</IonButton>
  </IonContent>
</IonPage>

  //Example.tsx
  <IonPage>
    <IonHeader>
      <IonToolbar>
        <IonTitle>Example Page!</IonTitle>
      </IonToolbar>
    </IonHeader>
    <IonContent className="ion-padding">
      Hello example Page!
    </IonContent>
  </IonPage>

결과물은 다음과 같다.