🔑 Route Parameters

What Is a Route Parameter?

A route parameter is a named placeholder in a route's path, written with a leading colon. Where a static route like /about matches exactly one URL, a dynamic route like /users/:userId matches a whole family of them — /users/1, /users/42, /users/ada — and captures whatever appeared in that slot.

Think of it like a mail-merge template: the route is "Dear :name," and the URL supplies the name. React Router matches the pattern, extracts the value, and makes it available to your component as a string.

One detail to burn in now: params are always strings. The URL /users/42 gives you userId === '42', not the number 42. If you need a number, you convert it yourself — a source of subtle bugs we'll defuse in the validation section.

Reading Params with useParams

Define the dynamic segment in the route path, then call the useParams() hook inside the matched component. It returns an object whose keys are your parameter names.

import { Routes, Route, useParams } from 'react-router-dom';

// The route defines the placeholder:
function App() {
  return (
    <Routes>
      <Route path="/users/:userId" element={<UserProfile />} />
      <Route path="/posts/:postId/comments/:commentId" element={<Comment />} />
    </Routes>
  );
}

// The component reads it:
function UserProfile() {
  const { userId } = useParams();   // e.g. "42" from /users/42
  return <h1>Profile for user {userId}</h1>;
}

Multiple parameters

A single route can carry several params. Destructure them all from one useParams() call — the keys match the names in the path exactly.

function Comment() {
  const { postId, commentId } = useParams();
  return (
    <div>
      <h2>Comment #{commentId}</h2>
      <p>On post: {postId}</p>
    </div>
  );
}
// URL /posts/hello-world/comments/7  →  { postId: 'hello-world', commentId: '7' }

Fetching Data by Param

The whole point of a param is usually to fetch the matching record. The pattern: read the param, load its data in an effect, and — critically — put the param in the effect's dependency array so navigating from /users/1 to /users/2 re-runs the fetch.

import { useParams } from 'react-router-dom';
import { useState, useEffect } from 'react';

function UserProfile() {
  const { userId } = useParams();
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    let cancelled = false;   // guard against a stale response arriving late
    setLoading(true);

    fetchUser(userId)
      .then(data => { if (!cancelled) { setUser(data); setError(null); } })
      .catch(err => { if (!cancelled) { setError(err.message); setUser(null); } })
      .finally(() => { if (!cancelled) setLoading(false); });

    return () => { cancelled = true; };   // cleanup when userId changes
  }, [userId]);   // <-- re-fetch whenever the param changes

  if (loading) return <LoadingSpinner />;
  if (error)   return <ErrorMessage message={error} />;
  if (!user)   return <NotFound />;

  return (
    <div className="user-profile">
      <h1>{user.name}</h1>
      <p>User ID: {userId}</p>
    </div>
  );
}

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

// in the route config:
{ path: 'users/:userId', element: <UserProfile />,
  loader: ({ params }) => fetchUser(params.userId) }

function UserProfile() {
  const user = useLoaderData();   // already resolved
  return <h1>{user.name}</h1>;
}

Optional & Wildcard Segments

Optional parameters

Append a ? to make a segment optional. The same route then matches with or without it, and the param is simply undefined when absent.

<Route path="/products/:category/:subcategory?" element={<Products />} />

function Products() {
  const { category, subcategory } = useParams();
  return (
    <div>
      <h1>{category} Products</h1>
      {subcategory && <h2>Subcategory: {subcategory}</h2>}
    </div>
  );
}
// /products/electronics          → { category: 'electronics', subcategory: undefined }
// /products/electronics/phones   → { category: 'electronics', subcategory: 'phones' }

Wildcard (splat) routes

A trailing * captures everything after a point — useful for file paths, docs trees, or any nested structure of unknown depth. Read it from the special "*" key.

<Route path="/files/*" element={<FileExplorer />} />

function FileExplorer() {
  const params = useParams();
  const filePath = params['*'] || '';   // everything after /files/

  return (
    <div>
      <h1>File Explorer</h1>
      <p>Current path: /files/{filePath}</p>
    </div>
  );
}
// /files/docs/2026/report.pdf  →  params['*'] === 'docs/2026/report.pdf'

Validating Parameters

Params come from the URL, and the URL comes from users — who mistype, share stale links, and probe your routes. Never trust a param blindly. Validate its shape, convert its type, and redirect on garbage input.

Convert types deliberately

Remember: params are strings. Turn them into what you actually need, right where you read them.

function ArchivePage() {
  const { year, month } = useParams();

  // Params are strings — convert with a radix, then sanity-check:
  const y = Number.parseInt(year, 10);
  const m = Number.parseInt(month, 10);

  const isValid =
    Number.isInteger(y) && y >= 1970 && y <= new Date().getFullYear() &&
    Number.isInteger(m) && m >= 1 && m <= 12;

  if (!isValid) return <Navigate to="/archive" replace />;

  return <h1>Archive for {y}/{m}</h1>;
}

Redirect on invalid input

When a format is wrong, send the user somewhere sensible with <Navigate> (declarative) or useNavigate (imperative). Use replace so the bad URL doesn't linger in history.

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

function ProductPage() {
  const { productId } = useParams();
  const navigate = useNavigate();

  useEffect(() => {
    // Expect IDs like "PROD-000123"
    if (!/^PROD-\d{6}$/.test(productId)) {
      navigate('/products', { replace: true });
    }
  }, [productId, navigate]);

  return <ProductDetails productId={productId} />;
}

import { z } from 'zod';

const paramsSchema = z.object({
  userId: z.string().regex(/^\d+$/).transform(Number),
});

const result = paramsSchema.safeParse(useParams());
if (!result.success) return <Navigate to="/404" replace />;
const { userId } = result.data;   // a real number, guaranteed valid

Path Params vs Query Strings

Two different tools for two different jobs. A path parameter identifies which resource — it's part of the resource's address. A query string tweaks how you view that resource — search terms, sort order, page number, filters.

They combine beautifully. Here a path param picks the category while query params drive the search and sort — and setSearchParams keeps the URL in sync so results are shareable and bookmarkable.

import { useParams, useSearchParams } from 'react-router-dom';

function CategoryResults() {
  const { category } = useParams();                    // which category (identity)
  const [searchParams, setSearchParams] = useSearchParams();

  const query = searchParams.get('q') ?? '';           // how to view it (view state)
  const sort  = searchParams.get('sort') ?? 'relevance';
  const page  = Number.parseInt(searchParams.get('page') ?? '1', 10);

  const updateSort = (value) => {
    // Merge into existing params instead of clobbering them:
    setSearchParams(prev => {
      const next = new URLSearchParams(prev);
      next.set('sort', value);
      return next;
    });
  };

  return (
    <div>
      <h1>{category} — page {page}</h1>
      <select value={sort} onChange={e => updateSort(e.target.value)}>
        <option value="relevance">Relevance</option>
        <option value="price">Price</option>
      </select>
    </div>
  );
}
// URL: /category/shoes?q=running&sort=price&page=2

/users/42            ← 42 is WHO (path param)
/users?role=admin    ← role=admin is a FILTER (query string)

Practice & Quiz

// TODO: read userId, fetch on mount and whenever it changes,
// and show a loading state.
function UserProfile() { /* ... */ }

function UserProfile() {
  const { userId } = useParams();
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setLoading(true);
    fetchUser(userId)
      .then(setUser)
      .finally(() => setLoading(false));
  }, [userId]);

  if (loading) return <p>Loading…</p>;
  return <h1>{user.name} (#{userId})</h1>;
}

import { useParams, Navigate } from 'react-router-dom';

function Post() {
  const { postId } = useParams();
  if (!/^\d+$/.test(postId)) return <Navigate to="/404" replace />;
  const id = Number.parseInt(postId, 10);
  return <h1>Post {id}</h1>;
}

Best Practices & Pitfalls

✅ Do

• Name params descriptively: :userId, :productSlug — not :id everywhere
• Remember params are strings; convert with Number.parseInt(x, 10) when you need numbers
• Include the param in your effect's dependency array so data re-fetches on change
• Validate and redirect on malformed input with <Navigate replace>
• Use path params for identity, query strings for filters and sorting

❌ Don't

• Assume a param is a number — userId + 1 on "42" gives "421"
• Forget the dependency array and serve one record forever
• Trust param format blindly — a bad id shouldn't crash the page
• Cram filters into the path (/products/price/0-100/sort/asc) when a query string is cleaner

const { page } = useParams();   // "2"
const next = page + 1;          // "21"  ❌ string concatenation!
const next2 = Number(page) + 1; // 3     ✅ convert first

Summary

📚 Additional Resources

• React Router — useParams
• React Router — useSearchParams
• React Router — Dynamic Segments
• MDN — URLSearchParams

🚀 What's Next?

You can now read the URL — next you'll learn to change it from code. Programmatic Navigation covers the useNavigate hook: redirecting after a form submit, guarding protected routes, and moving through history.