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
})
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
})
