#57 What is dynamic routing in React?

What is Dynamic Routing?

At its core, dynamic routing allows you to create routes whose paths include variable segments. Instead of defining a separate route for every single product (which would be impossible!), you define a single route pattern that can match many different specific paths.

Think of it like a template:

• Static Route: /dashboard (always goes to the dashboard)
• Dynamic Route: /users/:id (:id is a placeholder that can be 1, 2, abc, etc.)

In React applications, dynamic routing is typically handled by routing libraries, with React Router DOM being the most popular choice.

Why Do We Need Dynamic Routing in React?

Dynamic routing is essential for:

• Single Page Applications (SPAs): Providing unique URLs for different "views" or "states" of your application, allowing users to bookmark pages or share specific content.
• Content-Driven Websites: Displaying details for items fetched from a database (e.g., products, articles, user profiles). You don't know the exact IDs or slugs beforehand.
• Reusable Components: Using a single component (e.g., <ProductDetail />) to render different content based on the URL parameter.

Implementing Dynamic Routing with React Router DOM

Let's walk through how to set up dynamic routes using react-router-dom.

Step 1: Installation

If you haven't already, install React Router DOM:

npm install react-router-dom

Step 2: Basic Router Setup

Wrap your application with BrowserRouter and define your routes using Routes and Route components.

Example: App.js

import React from 'react';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import HomePage from './HomePage';
import ProductDetail from './ProductDetail';
import NotFoundPage from './NotFoundPage';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/products/123">Product 123</Link>
          </li>
          <li>
            <Link to="/products/abc">Product ABC</Link>
          </li>
        </ul>
      </nav>

      <Routes>
        <Route path="/" element={<HomePage />} />
        {/* Defining a dynamic route using a colon (:) */}
        <Route path="/products/:productId" element={<ProductDetail />} />
        <Route path="*" element={<NotFoundPage />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Step 3: Defining Dynamic Segments

In the example above, :productId is our dynamic segment. The colon : tells React Router that this part of the path is a placeholder variable. You can name it anything descriptive, like :userId, :slug, :category, etc.

Step 4: Accessing Parameters with useParams

Inside the component rendered by a dynamic route, you can access the value of the dynamic segment using the useParams hook from react-router-dom.

Example: ProductDetail.js

import React from 'react';
import { useParams } from 'react-router-dom';

function ProductDetail() {
  // useParams returns an object where keys are the dynamic segment names
  // and values are their corresponding values from the URL.
  const { productId } = useParams();

  // In a real application, you would use productId to fetch data from an API
  // e.g., fetch(`/api/products/${productId}`)

  return (
    <div>
      <h2>Product Detail Page</h2>
      <p>Displaying details for Product ID: <strong>{productId}</strong></p>
      <p>
        <em>
          (Imagine fetching product data for {productId} from your backend here.)
        </em>
      </p>
    </div>
  );
}

export default ProductDetail;

Step 5: Navigating to Dynamic Routes

You can navigate to dynamic routes using the <Link> component or programmatically with useNavigate.

Using <Link> (Declarative):

<Link to="/products/456">Go to Product 456</Link>
<Link to={`/products/${someProductIdVariable}`}>Go to Dynamic Product</Link>

Using useNavigate (Programmatic):

import { useNavigate } from 'react-router-dom';

function SomeComponent() {
  const navigate = useNavigate();

  const handleGoToProduct = (id) => {
    navigate(`/products/${id}`);
  };

  return (
    <button onClick={() => handleGoToProduct('new-product-slug')}>
      View New Product
    </button>
  );
}

Benefits of Dynamic Routing

• Scalability: You can handle an infinite number of unique items without defining an infinite number of routes.
• SEO Friendliness: Each distinct item (product, blog post) gets its own unique, shareable URL, which is great for search engines.
• User Experience: Users can bookmark specific content, refresh pages, and use browser back/forward buttons seamlessly.
• Code Reusability: A single component can render diverse content by leveraging the dynamic parameters.

Conclusion

Dynamic routing is a cornerstone of building robust and scalable single-page applications with React. By using variable segments in your route paths and accessing them with hooks like useParams, you can create powerful and flexible navigation patterns that adapt to your application's data. Mastering this concept is crucial for building real-world React applications!