Create a route just for adding layout using Code Based Routing
I want a way to add 2 different layouts depending on the routes using Code based routing.
I've tried creating two layout routes and make the corresponding routes use the correct layout route as its parent but it adds the path of the layout route to the route. How do I add a layout route without adding its path to its children routes?
This is my attempt at doing this.
const dashboardLayoutRoute = createRoute({
getParentRoute: () => rootRoute,
path: '_dashboardLayout',
component: () => {
return (
<LoginLayout>
<Outlet />
</LoginLayout>
)
}
})
const loginLayoutRoute = createRoute({
getParentRoute: () => rootRoute,
path: '_loginLayout',
component: () => {
return (
<AppLayout
siteMenu={<SiteMenu />}
userMenu={<UserMenu />}
menuItems={getCustomerMenuItems()}
menuItemsPostAdornments={(drawerOpen) => (
<>
<HelpCentreMenuItem drawerOpen={drawerOpen} />
<FeedbackMenuItem drawerOpen={drawerOpen} />
</>
)}>
<Outlet />
<SpeedDialComponent />
</AppLayout>
)
}
})
const indexRoute = createRoute({
getParentRoute: () => dashboardLayoutRoute,
path: PageRoutes.DASHBOARD,
component: DashboardPage
})
const loginRoute = createRoute({
getParentRoute: () => loginLayoutRoute,
path: PageRoutes.LOGIN,
component: Login
})
5 Replies
sunny-greenOP•15mo ago
I found a solution to what I'm wanting to achieve but I'm sure there's a proper way to do it.
const rootRoute = createRootRoute({
component: () => {
const location = useLocation()
const isAuthRoute =
location.pathname === PageRoutes.LOGIN ||
location.pathname === PageRoutes.FORGOT_PASSWORD
return (
<>
{!isAuthRoute && (
<AppLayout
siteMenu={<SiteMenu />}
userMenu={<UserMenu />}
menuItems={getCustomerMenuItems()}
menuItemsPostAdornments={(drawerOpen) => (
<>
<HelpCentreMenuItem drawerOpen={drawerOpen} />
<FeedbackMenuItem drawerOpen={drawerOpen} />
</>
)}>
<Outlet />
<SpeedDialComponent />
</AppLayout>
)}
{isAuthRoute && (
<LoginLayout>
<Outlet />
</LoginLayout>
)}
<TanStackRouterDevtools position="bottom-right" />
</>
)
}
})
ratty-blush•15mo ago
When using a pathless/layout route, doesn't have a
path. So, you should be using an id instead.ratty-blush•15mo ago
See this layout route, done in code-based routing.
https://github.com/TanStack/router/blob/67da2a7ea207a24ad4981f337c52bc3208369e8e/examples/react/basic/src/main.tsx#L129-L133
GitHub
router/examples/react/basic/src/main.tsx at 67da2a7ea207a24ad4981f3...
🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering. - TanStack/router
ratty-blush•15mo ago
The same concept is applied in file-based routing as well btw.
https://github.com/TanStack/router/blob/67da2a7ea207a24ad4981f337c52bc3208369e8e/examples/react/basic-file-based/src/routeTree.gen.ts#L30-L33
GitHub
router/examples/react/basic-file-based/src/routeTree.gen.ts at 67da...
🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering. - TanStack/router
sunny-greenOP•15mo ago
Perfect that worked, thankyou for replying and such a fast reply 🙏