I have the following use case:
Most of the routes in my application have a classic layout component, but some routes should be rendered as some kind blank pages (without navigation and stuff like that).
My current router looks like this:
<Routes>
<Route element={<MainPage />}>
<Route path={"/whatever"} element={<AnyPage />} />
{/* ... regular routes */}
</Route>
<Route element={<BlankPage />}>
<Route path={"/special-route"} element={<SpecialPage />} />
{/* ... other special routes */}
</Route>
</Routes>
My MainPage component contains a navigation that requires fetching additional data (to display badges and stuff like that). Now, I don't want this component to be rendered when the user is on a special route.
So, my question is, if/how we can use layout components with react-router that are only rendered, when they are needed? I understand and want that the layout component keeps its state when navigating between routes that use this layout, but I don't want the layout to be rendered, when it has never been used.
I hope my problem is clear. Thanks for any suggestions or links.
