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 />
</>
);
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 />
</>
);
