L5: Adding Dynamic Route Parameter

Now that we have a ListingDetailsPage component, we need to connect it to a route. But here's the challenge: we have many listings (listing 1, listing 2, listing 3, etc.), and we need one route that works for all of them!

This is where dynamic routes come in - routes with variable parts that change based on the URL.

What You'll Learn

• What dynamic routes are and why we need them
• How to add URL parameters to routes
• Understanding the :id syntax
• How React Router matches dynamic routes
• Preparing for data fetching based on URL

The Problem: One Page, Many Listings

Right now, we could create separate routes for each listing:

<Routes>
  <Route path="/" element={<HomePage />} />
  <Route path="/listing-1" element={<ListingDetailsPage />} />
  <Route path="/listing-2" element={<ListingDetailsPage />} />
  <Route path="/listing-3" element={<ListingDetailsPage />} />
  {/* What about listing 100? Or 1000? */}
</Routes>

Problems with this approach:

• ❌ Need to manually add a route for every listing
• ❌ Can't add new listings dynamically
• ❌ Lots of repetitive code
• ❌ Doesn't scale at all

The Solution: Dynamic Routes

Instead, we create one route that handles all listings:

<Routes>
  <Route path="/" element={<HomePage />} />
  <Route path="/listing/:id" element={<ListingDetailsPage />} />
</Routes>

What :id means:

• : tells React Router "this part is variable"
• id is the parameter name (you choose this)
• Works for /listing/1, /listing/2, /listing/999, etc.

Understanding Dynamic Segments

Let's break down the route path:

Step 1: Add the Dynamic Route

Let's update the Router component to include our dynamic route:

// [!code word:/listing/:id]
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import HomePage from '../pages/HomePage';
import ListingDetailsPage from '../pages/ListingDetailsPage'; 

export default function Router() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/listing/:id" element={<ListingDetailsPage />} /> // [!code ++]
      </Routes>
    </BrowserRouter>
  );
}

http://localhost:5173/listing/1
http://localhost:5173/listing/2
http://localhost:5173/listing/999

How Route Matching Works

React Router follows this process when you navigate to a URL:

Multiple Dynamic Parameters

You can have multiple dynamic segments in one route:

<Route path="/listing/:id" element={<ListingDetailsPage />} />

<Route 
  path="/listing/:id/review/:reviewId" 
  element={<ReviewPage />} 
/>

<Route 
  path="/user/:userId/listing/:listingId/booking/:bookingId" 
  element={<BookingDetailsPage />} 
/>

Complete Router Code

Here's what your Router component should look like now:

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import HomePage from '../pages/HomePage';
import ListingDetailsPage from '../pages/ListingDetailsPage';

export default function Router() {
  return (
    <BrowserRouter>
      <Routes>
        {/* Static route - exact match */}
        <Route path="/" element={<HomePage />} />
        
        {/* Dynamic route - matches any ID */}
        <Route path="/listing/:id" element={<ListingDetailsPage />} />
      </Routes>
    </BrowserRouter>
  );
}

Route Order and Priority

The order of routes matters when you have overlapping patterns:

<Routes>
  <Route path="/" element={<HomePage />} />
  <Route path="/listing/new" element={<CreateListingPage />} />
  <Route path="/listing/:id" element={<ListingDetailsPage />} />
  <Route path="*" element={<NotFoundPage />} />
</Routes>

<Routes>
  <Route path="/" element={<HomePage />} />
  <Route path="/listing/:id" element={<ListingDetailsPage />} />
  <Route path="/listing/new" element={<CreateListingPage />} />
  <Route path="*" element={<NotFoundPage />} />
</Routes>

Most Specific
    ↓
Less Specific
    ↓
Catch-All (*)

// 1. Exact matches
<Route path="/about" element={<AboutPage />} />

// 2. Specific dynamic routes
<Route path="/listing/new" element={<CreateListingPage />} />

// 3. General dynamic routes
<Route path="/listing/:id" element={<ListingDetailsPage />} />

// 4. Catch-all
<Route path="*" element={<NotFoundPage />} />

Common URL Parameter Patterns

What Happens Next?

Right now, our dynamic route works, but the page doesn't use the ID from the URL. Here's what we'll do in the next lessons:

const { id } = useParams(); // id = "42" from /listing/42

useEffect(() => {
  fetch(`/api/listings/${id}`).then(/* ... */);
}, [id]);

Testing Your Routes

Here's how to verify your dynamic route is working:

http://localhost:5173/listing/1
http://localhost:5173/listing/2
http://localhost:5173/listing/99
http://localhost:5173/listing/test

http://localhost:5173/invalid-page

Common Questions

Quick Recap

What we accomplished:

• ✅ Added dynamic route with :id parameter
• ✅ Imported and used ListingDetailsPage component
• ✅ Tested URLs with different IDs
• ✅ Understood route matching and order
• ✅ Learned about multiple parameters

Key concepts:

• Dynamic routes - Routes with variable segments (:paramName)
• :id syntax - Defines a URL parameter
• Route matching - First match wins strategy
• Route order - Specific before general
• Scalability - One route handles unlimited resources

What's Next?

In Lesson 6, we'll use the useParams hook to extract the id from the URL. This is how we'll know which listing to display - the ID tells us exactly what data to fetch! 🎯