IonRouterOutlet in App.tsx makes my components re-render

Ionic Framework Ionic React
1

In my app using the IonRouterOutlet in my App.tsx made the inner routes re-render up to 5 times. I solved that by using a React instead of . It is confusing to me that in the IonRouterOutlet Docs it is stated to use it only in Angular apps, whereas in the Navigation/Routing Guidance it is explained how to use it. My code with that issue can be checked in this Stackoverflow Post.

What is the right way, if any, of using the IonRouterOutlet in a React app? Is there any other way to obtain the transition animation effect? Thanks

1 Like
2

I Think you might have your routes set up incorrectly…

  • Why do you have an IonPage element where it is?
  • Also what is <SideMenu></SideMenu> ?
  • Why is your login page in you Tabs route?

I think you are getting all of the re-renders because of how you setup the structure. I might suggest starting with the base of one of the starter templates and building upon that

3

Hi Aaron thank you for pointing out some issues and the suggestions. Answering your points:

  1. I needed an element with id=“main” to append the SideMenu to. Otherwise it fails to load.
  2. SideMenu is a IonMenu component with all the app links
  3. Good point. I removed all the Tabs related components and still got this issue. I’ll rearrange my routes.