Nested Routes in TanStack Router

Illustrates how to create nested routes with TanStack Router, enabling complex application structures with parent and child components.

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

Imports necessary components and functions from TanStack Router.

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

Defines the App component that uses RouterProvider to enable routing within the application.

const Layout = () => (
  <div>
    <h1>Main Layout</h1>
    <Outlet />
  </div>
);

Defines a Layout component that acts as a parent route component. It uses <Outlet /> to render child routes.

const Home = () => <div>Home Page</div>;

Defines a simple Home component that will be used as a child route.

const About = () => <div>About Page</div>;

Defines a simple About component that will be another child route.

const router = createBrowserRouter([
  {
    path: '/',
    element: <Layout />,
    children: [
      { path: '/', element: <Home /> },
      { path: 'about', element: <About /> }
    ]
  }
]);

Creates a router instance with createBrowserRouter. Defines a nested route structure where 'Layout' acts as the parent component with 'Home' and 'About' as child routes.