Basic Nested Route Configuration

Demonstrate how to configure a basic parent-child route structure in TanStack Router, defining parent routes and embedding child routes within them.

import { createBrowserRouter, RouterProvider } from 'tanstack-router';
import Home from './Home';
import About from './About';
import Profile from './Profile';

First, import necessary components from TanStack Router and your component files.

const router = createBrowserRouter([
  {
    path: '/',
    element: <Home />, // Parent route
    children: [
      { path: 'about', element: <About /> }, // Child route
      { path: 'profile', element: <Profile /> } // Child route
    ]
  }
]);

Creating a router with a base route and nested child routes for 'about' and 'profile' paths.

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

Define the main App component that renders the RouterProvider with the created router.