Summary - Advanced router
- React course
- Intermediate
- Lesson 44/80
- 5 min
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.
Practice 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.
Starter code
import { useParams, useNavigate } from "react-router-dom";
// Write the ProductDetail component hereSample 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;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which hook reads parameters?
- useParams Correct answer
- useOutlet
- useRoute
- useNavigate
Explanation: useParams reads URL parameters.
2 Summary match
| Term | Meaning |
|---|---|
useParams |
Reads a parameter |
Outlet |
Renders the child route |
useNavigate |
Navigates in code |
navigate(-1) |
Goes back |