React Router: Params, Nested Routes & Loaders

You've seen basic routing — now let's go deeper. URL params let one route serve thousands of records ( /users/:id ). Nested routes with share layout across pages. And loaders fetch a route's data before it renders, moving data fetching out of useEffect entirely. These are the patterns behind every real multi-page React app.

Learn React Router: Params, Nested Routes & Loaders in our free React course — a beginner-friendly interactive lesson with runnable examples, a practice…

Part of the free React course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

1️⃣ Dynamic Params

A colon marks a dynamic segment. One route, infinite records — read the value with useParams() :

The demo models how the router turns a URL into that {' '} object — including a non-match returning null :

2️⃣ Nested Routes & Outlet

Children nest under a parent. The parent renders shared chrome and an where the matched child appears — so the layout stays mounted as you navigate between children:

For view options like sorting or pagination, use the query string via useSearchParams . Your turn — read the sort value from a parsed query:

3️⃣ Loaders — Data Before Render

A loader runs during navigation, before the component mounts. The component reads the result with useLoaderData() — no in-component loading flag, no useEffect fetch:

The demo models the key idea: the loader runs first and produces ready data, then the component renders it:

These lines of a route with a loader are scrambled. Put them in the correct order:

1) The URL is /products/99 and the route is /products/:id . What does useParams() return?

2) You navigate between two child routes of the same parent. Does the parent layout re-mount?

No. The parent stays mounted; only the content swaps. That's the whole point of nesting.

3) Where does loader data come from inside the component?

useLoaderData() — the router resolves the loader before rendering and hands you the result.

📋 Quick Reference

Routes go both ways: you read params from a URL, but you also build URLs to link to. Model a function that turns a post id into its permalink path /posts/:id .

Practice quiz

How do you define a dynamic URL segment in React Router?

  • With *id
  • With {id}
  • With a colon, like /users/:id
  • With <id>

Answer: With a colon, like /users/:id. A colon marks a dynamic segment; /users/:id matches /users/42.

For the route /users/:id and URL /users/42, what does useParams() return?

  • { id: "42" }
  • { id: 42 }

Answer: { id: "42" }. useParams returns { id: "42" } — params are always strings.

What is <Outlet /> used for?

  • Rendering a portal
  • Reading query params
  • Throwing route errors
  • Marking where a matched child route renders inside a parent layout

Answer: Marking where a matched child route renders inside a parent layout. The parent places <Outlet /> where the matched child should appear, keeping the layout mounted.

Navigating between two child routes of the same parent…

  • Re-mounts the parent layout
  • Keeps the parent mounted; only the <Outlet /> content swaps
  • Reloads the page
  • Clears all state

Answer: Keeps the parent mounted; only the <Outlet /> content swaps. The parent stays mounted; only the Outlet content changes — the point of nested routes.

What does a route loader do?

  • Fetches the route's data before the component renders
  • Renders a spinner
  • Caches components
  • Handles form submits

Answer: Fetches the route's data before the component renders. A loader runs during navigation, before the component mounts, so data is ready on render.

How does a component read loader data?

  • useParams()
  • useState()
  • useLoaderData()
  • props.data

Answer: useLoaderData(). useLoaderData() returns the resolved loader result.

What's the difference between useParams and useSearchParams?

  • They're identical
  • useParams reads path segments; useSearchParams reads/writes the query string after ?
  • useParams writes the URL; useSearchParams reads it
  • useSearchParams is for nested routes

Answer: useParams reads path segments; useSearchParams reads/writes the query string after ?. Path params identify the resource; search params hold view options like sort/page.

Which renders if a route's loader throws?

  • The nearest <Suspense>
  • A blank page
  • The parent layout
  • The route's errorElement

Answer: The route's errorElement. errorElement catches loader failures cleanly for that route.

A child route with path: "settings" (no leading slash) is…

  • An absolute path
  • A relative path that nests under the parent
  • Invalid
  • The same as "/settings"

Answer: A relative path that nests under the parent. Without a leading slash it's relative and nests; "/settings" is absolute and won't nest as expected.

A key advantage of loaders over fetching in useEffect is…

  • Less code only
  • They run on the server only
  • They eliminate the render → useEffect → spinner → re-render waterfall by loading before render
  • They cache forever

Answer: They eliminate the render → useEffect → spinner → re-render waterfall by loading before render. The router resolves data during navigation, avoiding the in-component loading flash.