React nested routes

Hi.
I am building an application with two main navigation area. One accessible to guests, the other one accessible only to logged users.
All pages in the user area have a common header. I made a simple example of the app here:

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonRouterOutlet>
        <Switch>
          <Route path="/userArea" component={UserArea} />
          <Route path="/guestArea" component={GuestArea} exact={true} />
          <Route path="*">
            <Redirect to="/userArea" />
          </Route>
        </Switch>
      </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>
);

const GuestArea: React.FC = () => {
  return (
    <IonPage>
      Login page
    </IonPage>
  );
};

const UserArea: React.FC = () => {
  useEffect( () => {
    console.log("UserArea did mount");
    return ( () => {
      console.log("UserArea will unmount")
    })
  })
  return (
    <IonPage>
      <Header />
      <IonContent>
        <Switch>
          <Route path="/userArea/page1" component={Page1} />
          <Route path="/userArea/page2" component={Page2} />
          <Route path="*">
            <Redirect to="/userArea/page1" />
          </Route>
        </Switch>
      </IonContent>
    </IonPage>
  );
};

const Header: React.FC = () => {

  useEffect( () => {
    console.log("header did mount");
    return ( () => {
      console.log("header will unmount")
    })
  })

  return (
    <IonHeader>
      <IonToolbar>
        <IonTitle>My header</IonTitle>
        <Link to='/userArea/page1'>page1</Link>
        <Link to='/userArea/page2'>page2</Link>
      </IonToolbar>
    </IonHeader>
  );
};
const Page1: React.FC = () => {
  return (
    <p>page 1</p>
  );
};

const Page2: React.FC = () => {
  return (
    <p>page 2</p>
  );
};

Here is my problem. I go from page1 to page2, the Header and the UserArea components get unmounted and mounted, TWICE. I would expect it to stay mounted as I am still in the user area and then the UserArea.

In this example it is not a big issue, but in my real app, the header takes longer to load, and it feels like the whole page is reloaded.

I guess I am doing something wrong with the nested routes ?

Thanks,
Arthur

3 posts - 2 participants

Read full topic