Summary - Advanced router

Set up a nested route structure with product list and detail pages.

Summary - Advanced router

In this group you learned URL parameters, nested routes and programmatic navigation. useParams reads parameters, Outlet renders nested routes, useNavigate navigates programmatically.

Together these three tools build complex app structures: detail pages, dashboard panels, multi-step forms. In the last step you will combine all of them.

Exercise Product detail

Complete the skeleton below. Write a ProductDetail component; read slug with useParams, return an <h1>{slug}</h1> and a <button onClick={() => navigate(-1)}>Back</button>. Get navigate with useNavigate. Export it.

Show example solution

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

function ProductDetail() {
  const { slug } = useParams();
  const navigate = useNavigate();
  return (
    <div>
      <h1>{slug}</h1>
      <button onClick={() => navigate(-1)}>Back</button>
    </div>
  );
}

export default ProductDetail;

Test yourself

Which hook reads parameters?
- useParams
- useOutlet
- useRoute
- useNavigate
Show answer

useParams — useParams reads URL parameters.
Summary match

useParams

Reads a parameter
Outlet

Renders the child route
useNavigate

Navigates in code
navigate(-1)

Goes back

Next lesson: Project: Multi-page app

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies