How do you handle nested dynamic routes with React-Router

Question

With the help of code and examples can you tell me How do you handle nested dynamic routes with React-Router?

Answer 1

Handling Nested Dynamic Routes in React Router (v6)

1. Define Nested Routes in createBrowserRouter

import { createBrowserRouter, RouterProvider } from "react-router-dom";

import Layout from "./Layout";

import UserProfile from "./UserProfile";

import UserPosts from "./UserPosts";

const router = createBrowserRouter([

  {

    path: "/user/:userId",

    element: <Layout />,

    children: [

      { path: "", element: <UserProfile /> }, // Matches `/user/:userId`

      { path: "posts", element: <UserPosts /> }, // Matches `/user/:userId/posts`

    ],

  },

]);

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

export default App;

2. Use <Outlet /> to Render Nested Routes in Layout

import { Outlet } from "react-router-dom";

const Layout = () => {

  return (

    <div>

      <h2>User Page</h2>

      <Outlet /> {/* Renders matched child routes */}

    </div>

  );

};

export default Layout;

3. Access Dynamic Params with useParams()

import { useParams } from "react-router-dom";

const UserProfile = () => {

  const { userId } = useParams();

  return <h3>Profile of User {userId}</h3>;

};

export default UserProfile;