"Global" component on all pages to not reload

Ionic Framework Ionic React
1

Hello, I come with a little question on a problem with which I’m struggling a bit :slight_smile:

I currently have an app based on the React demo app and this App.tsx with some routes and my Menu, which is a component shared with all pages.

    <IonApp>
      <IonReactRouter>
        <IonSplitPane contentId="main">
          <Menu />
          <IonRouterOutlet id="main">
            <Route path="/home" component={HomePage} />
            <Route path="/products" component={ProductPage} exact />
            <Route path="/favorites" component={ProductPage} />
            <Route render={(): JSX.Element => <Redirect to="/home" />} />
          </IonRouterOutlet>
        </IonSplitPane>
      </IonReactRouter>
    </IonApp>

I know have a Header component present in all my pages in a IonPage component but I would like it to not “refresh/reload” on each page changing, is it possible to add it in App.tsx to do this ?

I also just read that IonRouterOutlet should only be used for Angular, is it true ? What should I do ?

Thanks a lot.
Malo.

2

Just my thoughts… before you go down a rabbit hole regarding performance and re-renders, make sure it is time well spent

  • Pitfall #4: Overthinking performance : He adds, “unnecessary re-renders” are not necessarily bad for performance. Just because a component re-renders, doesn’t mean the DOM will get updated (updating the DOM can be slow). React does a great job at optimizing itself; it’s fast by default.

Need more code to better understand problem… you can create a sample project in codesandbox.io

1 Like
3

Thanks a lot for your answer !
I understand that re-renders are not so bad, I am confident in React for optimization :wink:

What I meant, want, is not to optimize but only to have a better fluidity on my website.

I re-explain. I have a Header with the logo, some links… which is present on all pages. When I navigate and change page I see the header re-rendering.
What I would like it is to keep it, making the rest of the page to load/reload but not the Header.

I’m not sure a lot more code would be useful but some images could be :slight_smile:

Page 1

    <IonPage id="home-page">
      <Header />
      <div className="page-content">
        <Map
          shouldLoadStores
          hide={false}
        />
        <ShopList limit="3" />
      </div>
    </IonPage>

Page 2

    <IonPage id="login-page">
      <Header />

      <IonContent>
        <div className="login-logo">
          <img src="assets/img/appicon.svg" alt="Ionic logo" />
        </div>

        <form>
          ...
        </form>
      </IonContent>
    </IonPage>

As you can see I have <Header /> on both pages, what I would like is to put this component in App.tsx to not see it re-render when changing page, an optionally to not write it in every pages :stuck_out_tongue:

ezgif.com-gif-maker
ezgif.com-gif-maker364×644 421 KB

It’s not really visible but as you can see on the GIF, when I change page you have the animation on the whole page, on the Header too. I would like to keep Header in place :open_mouth:

Thanks.
Malo

4

Hi there! No, this is not really the way you should be doing things.

Having a per-page header is the correct way to handle things.

5

While I highly recommend you follow the standard of having the header on each page, I have the setup you are talking about and it seems to work well. Given that it’s not recommended it could break with any Ionic update, but if you must do it here is how I structured my app:

    <IonApp>
      <IonReactRouter>
        <IonSplitPane contentId="main">
          <Menu/>
          <IonContent id="main">
            <Header/>
            <IonRouterOutlet>
              <PublicRoute exact path={PAGE_URL.HOME} component={Home}/>
                ...

The IonContent there makes it work, but you still need your pages below to have IonPage and IonContent as well, like:

    <IonPage>
      <IonContent className="page-content">
        ...

I’m not sure if nesting IonContent like this causes issues though. I’m already way too deep with UI customization so I don’t really notice anymore :sweat_smile:

6

Thanks a lot for your answers ! @mhartington @evancabinet

I will try for the experience but if I shouldn’t let it like this so…

For my general culture is there a little explanation on why we shouldn’t, why it isn’t possible ?

Thanks again

7

It seems that I found what was causing the effect which disturbs me: the routerDirection.

To explain, in my Menu I put routerDirection='none' and there isn’t this animation of “reloading”, but where I didn’t specify routerDirection the default value is forward.
According to this routerDirection is just for animation.

In conclusion, putting routerDirection='none' resolves the problem !

I actually have an history.push somewhere, I have now to find how to do this here :stuck_out_tongue: