Route Parameters

What Are Route Parameters?

Route parameters are like fill-in-the-blanks in your URLs. Instead of creating a separate route for every possible page, you create one route with a parameter and let the URL tell you what to display.

Think of it like a vending machine. You don't need a different machine for every snack — you just press a different button (the parameter) and get a different result.

Parameters are how apps like Instagram handle millions of profiles with a single route. That /users/bilal and /users/sarah? Same route, different parameter.

Dynamic Routes

Creating a dynamic route is as easy as adding a colon before the parameter name in your path. That colon tells React Router this part of the URL is variable.

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/users/:userId" element={<UserProfile />} />
        <Route path="/posts/:postId" element={<BlogPost />} />
        <Route path="/products/:category/:id" element={<Product />} />
      </Routes>
    </BrowserRouter>
  );
}

You can have multiple parameters in a single route. That products example shows a category and an id — both are captured separately. The URL /products/electronics/42 gives you category: "electronics" and id: "42".

Parameters are always strings. If you need numbers or other types, convert them after you retrieve the value.

Accessing Parameters

To grab the parameter values inside your component, you use the useParams hook. It returns an object with all the parameters from the current route.

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

function UserProfile() {
  const { userId } = useParams();

  return (
    <div>
      <h1>User Profile: {userId}</h1>
    </div>
  );
}

The key names in useParams match exactly what you put after the colon in your route path. So if your route is /users/:userId, useParams gives you { userId: "..." }.

From here you can use that value to fetch data, filter content, or do whatever your component needs to do.

Using Parameters in Components

The real power of route parameters is combining them with data fetching. Grab the ID from the URL, fetch the data, and render it. Clean and simple.

function BlogPost() {
  const { postId } = useParams();
  const [post, setPost] = useState(null);

  useEffect(() => {
    fetch(`/api/posts/${postId}`)
      .then(res => res.json())
      .then(data => setPost(data));
  }, [postId]);

  if (!post) return <div>Loading...</div>;

  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </article>
  );
}

Notice how the useEffect depends on postId. When the parameter changes — like navigating from /posts/1 to /posts/2 — the effect re-runs and fetches new data. React Router handles the component update, and your data fetching stays in sync.

Always handle the loading state though. Users shouldn't stare at a blank screen while your data fetches. Show a spinner, a skeleton, or at least some text that says "Loading..."