How do nested routes work?

Ionic Framework Ionic React
1

I want my Ionic app to have a couple of screens (to start with) with the same layout; I think I can do this using nested routes, but I can’t get it to work.

So, I have 2 routes: /landing/signin and /landing/signup.
The default route, ‘/’, should be redirected to /landing/signin.

In App.tsx, I have this:

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonRouterOutlet>
        <Route path="/landing/:id" component={Landing} />
        <Route path="/" component={Landing} />
      </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>
);

Then in Landing.tsx, I have:

const Landing: React.FC<any> = () => {
  return (
    <IonPage>
      <IonContent class="ion-content">
          <Logo />
          <IonRouterOutlet>
              <Route path="/landing/signin" exact={true}>
                <SignIn/>
              </Route>
              <Route path="/landing/signup" exact={true}>
                <SignUp/>
              </Route>
              <Route path="/" exact={true}>
                <SignIn/>
              </Route>
          </IonRouterOutlet>
      </IonContent>
    </IonPage>
  );
};

( is just a component which displays an image).

The SignIn component contains:

const SignIn : React.FC = () => {
  return <h3>Welcome</h3>;
};

When I look at this in the browser, I can see the logo, but that’s all - the ‘Welcome’ heading isn’t shown.

What am I doing wrong?

2

Start here: React Navigation: Router Link Redirect to Navigate to Another Page

1 Like
3

I read that, and thought I’d copied it, but my version doesn’t seem to work!

4

Each <Route> has to contain an <IonPage> as the child. So <SignIn> needs to return <IonPage><h3>Welcome</h3></IonPage>.

1 Like
5

Thank you! I didn’t realise that!