What are dynamic routes and what are route parameters?

A dynamic route is a route path that contains a placeholder segment (a route parameter) instead of a fixed, hard-coded value, so a single route definition can match many different URLs. Route parameters are the named placeholder segments (prefixed with : in React Router) whose actual values are extracted from the matched URL at runtime.

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

function UserProfile() {
// useParams() returns an object of all dynamic segments matched for this route
const { userId } = useParams();
return <div>Profile for user: {userId}</div>;
}

function App() {
return (
  <BrowserRouter>
    <Routes>
      {/* :userId is a route parameter — matches /users/1, /users/abc, etc. */}
      <Route path="/users/:userId" element={<UserProfile />} />
    </Routes>
  </BrowserRouter>
);
}

A route can also define multiple parameters and an optional catch-all (splat) parameter:

// Multiple params: /posts/2024/react-hooks-guide
<Route path="/posts/:year/:slug" element={<Post />} />

// Optional segment (v6.4+): matches /shop and /shop/electronics
<Route path="/shop/:category?" element={<Shop />} />

// Splat/wildcard param: matches any depth, e.g. /docs/a/b/c
<Route path="/docs/*" element={<Docs />} />

function Post() {
const { year, slug } = useParams();
// year -> "2024", slug -> "react-hooks-guide"
return <h1>{slug} ({year})</h1>;
}

Key points:

• Route params are always returned as strings by useParams() — convert them (e.g., Number(id)) if you need a number.
• Static routes (/about) are matched exactly; dynamic routes (/users/:userId) match a whole family of URLs and are essential for detail/edit pages, pagination, category filters, etc.
• Route params are different from query/search params (?sort=asc), which are read with useSearchParams() instead and are meant for optional, non-hierarchical data like filters or sorting.
• Because dynamic segments can match unexpected values, always validate/guard params (e.g., check the fetched resource exists) rather than assuming the value is always well-formed.