Defining Nested Routes with TanStack Router

Show how to define nested routes in a React application using TanStack Router, including parent and child routes for a seamless navigation experience.

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Layout from './components/Layout';
import HomePage from './components/HomePage';
import AboutPage from './components/AboutPage';
import UserProfile from './components/UserProfile';

// Define the route configuration
const router = createBrowserRouter([
  {
    path: '/',
    element: <Layout />, // This acts as the parent component
    children: [
      { path: '/', element: <HomePage /> },
      { path: 'about', element: <AboutPage /> },
      { path: 'profile/:userId', element: <UserProfile /> }
    ]
  }
]);

This code block creates a React Router configuration using TanStack Router. First, it imports necessary components and the `createBrowserRouter` and `RouterProvider` from `react-router-dom`. It demonstrates setting up a parent `Layout` route component that wraps the `HomePage`, `AboutPage`, and `UserProfile` components, illustrating the concept of nested routing. The `UserProfile` route is dynamic, indicated by `:userId`, which makes it possible to fetch user profiles dynamically based on the URL parameter.

import React from 'react';
import { RouterProvider } from 'react-router-dom';
import { router } from './routerConfig'; // Assume the router configuration is exported from './routerConfig'

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

This snippet demonstrates how to integrate the TanStack Router configuration into a React application. It imports the `RouterProvider` component from `react-router-dom` and the previously defined router configuration. The `RouterProvider` is then used in the `App` component, passing the `router` as a prop to enable routing throughout the application. This integration step is essential for activating the nested route configuration in the React app.