Setting Up Nested Routes in TanStack Router

Illustrate the process of configuring nested routes with TanStack Router, including tips on preserving UI hierarchy and passing route-specific data to child components.

import { createBrowserRouter, RouterProvider, Outlet } from 'tanstack-router';

Firstly, import necessary functions and components from 'tanstack-router'. 'Outlet' is used to render child routes.

const userRoutes = {
  path: 'users',
  element: <Users />,
  children: [
    { path: ':userId', element: <UserProfile /> },
    { path: ':userId/edit', element: <EditUser /> }
  ]
};

Define the child routes of the 'users' path. The 'children' array includes routes for a user profile and editing a user profile. These will be nested within the 'users' path.

const routes = [
  { 
    path: '/', 
    element: <Home />, 
    children: [userRoutes] 
  }
];

Set up the main routes array, nesting the 'userRoutes' within the home ('/') route as its children. This keeps the UI hierarchy intact.

const router = createBrowserRouter(routes);

Create a router instance by passing the 'routes' array to 'createBrowserRouter'. This initializes the router with our configured routes.

function App() {
  return <RouterProvider router={router} />;
}

Lastly, in your main App component, render the 'RouterProvider' passing in the 'router' instance. This makes the router available throughout the application.