I’m seeing the navbar flickering when changing to routes under a different set (but using the same layout). This is the case even if the navbar component is wrapped with React.memo(). From what I understand, it looks like during set transition, the layout instance is being replaced by another instance of the same component. In my setup, the NavBar is a child of the layout, it therefore gets scrapped and replaced by another navbar instance.
I’d like to ask what is the right way to ensure that ever-present elements like navbar and footers don’t get reinstantiated or pre-rendered unless their own props or children change.
I suppose one way to do it would be to place navbar and footers in
App.tsx above Routes but that seem a bit weird to me that such elements would be defined outside page layouts. Not sure if I’m understanding the role of layouts properly. I can use some clarification here.
Upon re-reading the router docs I believe I can use nested sets. By placing all the routes with the basic
<Navbar/><...main><Footer/> in the top level set, then use the next level of nesting to manage the layout of
Would still love to get feedback on whether this is the best way to handle the layout of the application shell.