how can i access all children pathname from parent route or __root route
import { createRootRouteWithContext, Outlet, useLocation } from '@tanstack/react-router';
import { QueryClient } from '@tanstack/react-query';
import * as React from 'react';
import NavBar from '../components/NavBar.tsx';
import SideBar from '../components/SideBar.tsx';
export const Route = createRootRouteWithContext<{ queryClient: QueryClient }>()({
component: RootLayout,
});
function RootLayout() {
const location = useLocation();
const sidebarPaths = ['/dashboard', '/blood-inventory', '/blood-inventory/$id', '/blood-inventory/new', '/donors', '/health-institute', '/blood-request'];
const showSidebar = sidebarPaths.includes(location.pathname);
return (
<React.Fragment>
<div className="text-white">
<div className="flex">
{showSidebar ? <div className="w-96"><SideBar /></div> : <NavBar />}
<div className="grow"><Outlet /></div>
</div>
</div>
</React.Fragment>
);
}
Project Help: TanStack Router
Managing Layout State via URL:
I want to control layout (e.g., sidebar/navbar) based on the URL instead of context/global state.
Example: /dashboard shows a sidebar, /login shows a default navbar.
Currently using useLocation to check the path and conditionally render layouts. Is this optimal?
Type-Safe Route Paths:
I manually define sidebarPaths (e.g., ['/dashboard', '/blood-inventory']), but it’s not type-safe.
Can I dynamically extract child paths from a parent route (e.g., /_auth) and ensure type safety?
import { QueryClient } from '@tanstack/react-query';
import * as React from 'react';
import NavBar from '../components/NavBar.tsx';
import SideBar from '../components/SideBar.tsx';
export const Route = createRootRouteWithContext<{ queryClient: QueryClient }>()({
component: RootLayout,
});
function RootLayout() {
const location = useLocation();
const sidebarPaths = ['/dashboard', '/blood-inventory', '/blood-inventory/$id', '/blood-inventory/new', '/donors', '/health-institute', '/blood-request'];
const showSidebar = sidebarPaths.includes(location.pathname);
return (
<React.Fragment>
<div className="text-white">
<div className="flex">
{showSidebar ? <div className="w-96"><SideBar /></div> : <NavBar />}
<div className="grow"><Outlet /></div>
</div>
</div>
</React.Fragment>
);
}
Project Help: TanStack Router
Managing Layout State via URL:
I want to control layout (e.g., sidebar/navbar) based on the URL instead of context/global state.
Example: /dashboard shows a sidebar, /login shows a default navbar.
Currently using useLocation to check the path and conditionally render layouts. Is this optimal?
Type-Safe Route Paths:
I manually define sidebarPaths (e.g., ['/dashboard', '/blood-inventory']), but it’s not type-safe.
Can I dynamically extract child paths from a parent route (e.g., /_auth) and ensure type safety?
