Dynamic Routing with Route Parameters

1. Defining a Dynamic Route

To create a dynamic route, you need to tell React Router that a part of the URL path is a placeholder, not a literal string. We do this by prefixing a segment of the path with a colon (:). This placeholder is called a route parameter or a dynamic segment.

For example, let's say we want to show a profile page for different users. Instead of creating routes for /users/alice, /users/bob, etc., we can define a single dynamic route:

<Route path="/users/:userId" element={<UserProfile />} />

In this case, :userId is our route parameter. This route will now match URLs like:

• /users/1
• /users/123
• /users/jane-doe

React Router will capture the value from that segment of the URL (e.g., "123") and make it available to our component.

Let's see how we add this to our router configuration in main.jsx. Building on our previous setup, we'll add a route for individual blog posts.

// src/main.jsx
// ... other imports
import PostPage from './pages/PostPage'; // A new component we will create

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    errorElement: <NotFoundPage />,
    children: [
      {
        index: true,
        element: <HomePage />,
      },
      {
        path: "about",
        element: <AboutPage />,
      },
      // New dynamic route for blog posts
      {
        path: "posts/:postId", // :postId is the route parameter
        element: <PostPage />,
      },
    ],
  },
]);

For a clear explanation from the official documentation, you can refer to the "Dynamic Segments" section of the resource below.

2. Accessing Route Parameters with useParams

Now that we've defined a dynamic route, how does our PostPage component know which post it's supposed to display? This is where the useParams hook comes in.

The useParams hook returns an object containing key-value pairs of the dynamic parameters from the current URL. The keys correspond to the parameter names you defined in your route path.

Let's create our PostPage.jsx component and use this hook.

// src/pages/PostPage.jsx
import { useParams } from 'react-router-dom';

function PostPage() {
  // useParams() returns an object like { postId: "123" }
  // We can destructure it to get the postId directly.
  const { postId } = useParams();

  return (
    <div>
      <h1>Blog Post Details</h1>
      <p>You are viewing post number: <strong>{postId}</strong></p>
    </div>
  );
}

export default PostPage;

If you navigate to /posts/42 in your browser, the PostPage component will render, and you'll see the message: "You are viewing post number: 42". If you go to /posts/hello-world, you'll see: "You are viewing post number: hello-world".

3. Creating Links and Fetching Dynamic Data

We can now access the postId, but the real goal is to fetch data for that specific post and display it. This involves two steps:

1. Creating links that point to our dynamic routes.
2. Using the parameter to fetch data.

Let's watch a comprehensive video that walks through this entire process, from defining the route to fetching and displaying the data. This video uses a modern and highly effective data-fetching pattern with React Router's loader functions.

Summary of the Loader Pattern

As you saw in the video, using loader functions is a powerful pattern that simplifies data fetching. Here’s a summary of the steps for our blog post example:

1. Create a loader function: This async function receives an object containing the route params. It uses the postId from params to fetch the specific post data and returns it.

   // src/pages/PostPage.jsx
   
   export async function loader({ params }) {
     const { postId } = params;
     // In a real app, you'd fetch from your API
     // const response = await fetch(`https://api.yourapp.com/posts/${postId}`);
     // const post = await response.json();
     // For this example, we'll simulate a fetch
     const post = { id: postId, title: `Post ${postId}`, body: `This is the content for post ${postId}.` };
     return { post };
   }
   

2. Attach the loader to the route: In main.jsx, import the loader and add it to the route definition.

   // src/main.jsx
   import PostPage, { loader as postLoader } from './pages/PostPage';
   
   // ... inside createBrowserRouter
   {
     path: "posts/:postId",
     element: <PostPage />,
     loader: postLoader, // Attach the loader here
   }
   

3. Use useLoaderData in the component: Replace useParams with the useLoaderData hook to get the data that the loader returned. React Router ensures this data is available before the component renders.

   // src/pages/PostPage.jsx
   import { useLoaderData, Link } from 'react-router-dom';
   
   function PostPage() {
     // Data from our loader function
     const { post } = useLoaderData();
   
     return (
       <div>
         <Link to="/">&larr; Back to Home</Link>
         <h1>{post.title}</h1>
         <p>{post.body}</p>
       </div>
     );
   }
   

4. Link to the dynamic routes: On your HomePage or a dedicated BlogPage, you would map over an array of posts to create the links.

   // src/pages/HomePage.jsx
   import { Link } from 'react-router-dom';
   
   const posts = [
     { id: 1, title: 'First Post' },
     { id: 2, title: 'Second Post' },
     { id: 3, title: 'Third Post' },
   ];
   
   function HomePage() {
     return (
       <div>
         <h1>My Blog</h1>
         <ul>
           {posts.map(post => (
             <li key={post.id}>
               <Link to={`/posts/${post.id}`}>{post.title}</Link>
             </li>
           ))}
         </ul>
       </div>
     );
   }
   

This approach is clean, robust, and handles loading and error states more gracefully than traditional useEffect-based fetching.

Conclusion

You've now unlocked one of the most powerful features of client-side routing. By creating dynamic routes, you can build scalable, data-driven interfaces that are central to modern web applications.

Key Takeaways:

• Define dynamic routes using the colon syntax in the route path (e.g., path="/posts/:postId").
• Use the useParams hook to access the values of dynamic URL segments within your components.
• The most common use case for route parameters is to fetch and display specific data for an item, like a product, user, or blog post.
• The modern React Router pattern uses loader functions to fetch data before the component renders, and the useLoaderData hook to access it, simplifying state management for data fetching.

In our next lesson, we will dive deeper into the useEffect hook. While loaders are excellent for route-based data fetching, useEffect remains a crucial tool for managing all other kinds of side effects in your components, such as setting up timers, subscriptions, or manually manipulating the DOM. Mastering its dependency array is key to writing performant and bug-free React code.