App.tsx additional layouts
I added two different layouts for differnt pages in my app. But now i have an infinite loop of rerenders. Not sure why.
Here's my App.tsx now:
const fullScreenRoutes = ['/map', '/landing-page'];
const StandardLayout = ({ children }: { children: React.ReactNode }) => (
<>
{shouldDisplayAppNavBar && <NavBar navigationItems={navigationItems} />}
<div className='mx-auto max-w-7xl sm:px-6 lg:px-8'>{children}</div>
</>
);
const FullScreenLayout = ({ children }: { children: React.ReactNode }) => (
<>
{shouldDisplayAppNavBar && <NavBar navigationItems={navigationItems} />}
{children}
</>
);
return (
<>
<div className='min-h-screen dark:text-white dark:bg-boxdark-2'>
{isAdminDashboard ? (
<Outlet />
) : fullScreenRoutes.includes(location.pathname) ? (
<FullScreenLayout>
<Outlet />
</FullScreenLayout>
) : (
<StandardLayout>
<Outlet />
</StandardLayout>
)}
</div>
<CookieConsentBanner />
</>
);
2 Replies
Hi @Captain Incredible. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the knowledge sources, Wasp currently supports a single root component (like your App.tsx) that wraps your entire app, and this is the recommended way to set up global layouts or providers. However, Wasp does not yet have built-in support for per-route or nested layouts directly in the DSL—this is a frequently requested feature and is under discussion for future releases, as seen in several GitHub issues and Discord threads. Right now, all routing is handled at the top level, and the router configuration is abstracted away from the developer, making advanced layout logic more challenging to implement cleanly in App.tsx alone Docs: Client Config, GitHub: Add support for Layouts (UI), GitHub: Grouped/nested routes.
Regarding your infinite rerender issue:
The knowledge sources do not provide a direct answer for debugging infinite rerenders in a custom App.tsx with multiple layouts. However, based on the Wasp documentation, your App component must accept and render its children (which are the routed pages), and you should avoid introducing any state or effect that could cause rerenders unless necessary. A common pitfall is using hooks or logic (like location or isAdminDashboard) in a way that triggers rerenders on every render, especially if those values are derived from context or hooks that themselves depend on the component tree. Key points from the sources: - Your App/root component must accept children and render them, as Wasp will pass the routed pages as children. If you change the signature or logic, it can break the app or cause errors Discord: Deploying to Fly.io. - Wasp currently does not support nested layouts or grouped routes in the DSL, so all layout logic must be handled in your root component GitHub: Grouped/nested routes, GitHub: Improve frontend routing. What you can do: - Double-check that any hooks (like useLocation or custom logic for isAdminDashboard) are not causing unnecessary rerenders. - Ensure that your App/root component is a pure function of its props and does not introduce side effects or state that could cause loops. - If you need more advanced layout logic, you may need to wait for future Wasp releases that support nested/grouped layouts natively. Summary:
Wasp does not yet support per-route or nested layouts natively, and all layout logic must be handled in your root component. Infinite rerenders are likely due to how state or hooks are used in your App.tsx, but the knowledge sources do not provide a specific fix for this scenario. If you continue to have issues, consider simplifying your layout logic or seeking help with a minimal reproducible example in the Wasp community channels. If you need more details on how to structure your root component, see the official client config docs. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Captain Incredible, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?
The knowledge sources do not provide a direct answer for debugging infinite rerenders in a custom App.tsx with multiple layouts. However, based on the Wasp documentation, your App component must accept and render its children (which are the routed pages), and you should avoid introducing any state or effect that could cause rerenders unless necessary. A common pitfall is using hooks or logic (like location or isAdminDashboard) in a way that triggers rerenders on every render, especially if those values are derived from context or hooks that themselves depend on the component tree. Key points from the sources: - Your App/root component must accept children and render them, as Wasp will pass the routed pages as children. If you change the signature or logic, it can break the app or cause errors Discord: Deploying to Fly.io. - Wasp currently does not support nested layouts or grouped routes in the DSL, so all layout logic must be handled in your root component GitHub: Grouped/nested routes, GitHub: Improve frontend routing. What you can do: - Double-check that any hooks (like useLocation or custom logic for isAdminDashboard) are not causing unnecessary rerenders. - Ensure that your App/root component is a pure function of its props and does not introduce side effects or state that could cause loops. - If you need more advanced layout logic, you may need to wait for future Wasp releases that support nested/grouped layouts natively. Summary:
Wasp does not yet support per-route or nested layouts natively, and all layout logic must be handled in your root component. Infinite rerenders are likely due to how state or hooks are used in your App.tsx, but the knowledge sources do not provide a specific fix for this scenario. If you continue to have issues, consider simplifying your layout logic or seeking help with a minimal reproducible example in the Wasp community channels. If you need more details on how to structure your root component, see the official client config docs. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Captain Incredible, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?
@Captain Incredible
- where are you getting
location from?
- can you try removing the conditionals, and just having everything wrapped in <FullScreenLayout><Outlet /></FullScreenLayout>? does it work? i think the error might be somewhere else
and as always, check the browser devtools and see if anything jumps out at you