how can i access all children pathname from parent route or __root route

[bilalbit]

I’m working on a project using TanStack Router and need help with the following:

Managing Layout State via URL:

I want to manage the layout state (e.g., showing a sidebar or navbar) based on the URL instead of using context or global state.

For example:

If the user is on /dashboard, show a sidebar.

If the user is on /login, show a default navbar.

Currently, I’m using useLocation to check the path and conditionally render the layout components. Is this the best approach?

Type-Safe Route Paths:

I have a list of paths (sidebarPaths) where the sidebar should be displayed, but I’m defining them manually:

typescript
Copy
const sidebarPaths = ['/dashboard', '/blood-inventory', '/blood-inventory/$id', '/blood-inventory/new', '/donors', '/health-institute', '/blood-request'];
This approach isn’t type-safe and could lead to errors if routes change. Is there a way to dynamically extract all child paths from a parent route (e.g., /_auth) and ensure type safety?

Authentication and Route Protection:

All routes under /_auth are protected and require authentication. If the user isn’t logged in, they should be redirected to /login.

How can I ensure that the sidebarPaths only include valid, authenticated routes?

Here’s my current implementation:

typescript
Copy

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

Questions:

• Is there a better way to manage layout state via the URL?
• [ ]
• How can I dynamically extract and validate route paths to ensure type safety?
• [ ]
• How can I ensure sidebarPaths only includes valid, authenticated routes?

Any guidance or examples would be greatly appreciated!

[schiller-manuel]

checkout router.routesByPath