Challenge: Routed cart

Write product list, detail and cart routes with React Router.

Challenge: Routed cart

In this challenge you set up a shopping cart app with React Router. The / route shows the product list; the /cart/:id route shows a single product.

Use useParams to read the id from the URL; find the product with products.find(p => p.id === id). Define routes inside <Routes>.

This is the basic skeleton of e-commerce sites.

Exercise Routed cart

Write ProductList: render a <ul> with <li>s listing products. Write ProductPage: get id with useParams(), find the product with products.find(p => p.id === Number(id)), render <h1>{product.name}</h1>. Write CartApp: inside <BrowserRouter> define <Routes> with path="/" element <ProductList /> and path="cart/:id" element <ProductPage />. export default CartApp.

Show example solution

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

const products = [{ id: 1, name: "Pen" }, { id: 2, name: "Notebook" }];

function ProductList() {
  return (
    <ul>
      {products.map((p) => (
        <li key={p.id}>{p.name}</li>
      ))}
    </ul>
  );
}

function ProductPage() {
  const { id } = useParams();
  const product = products.find((p) => p.id === Number(id));
  return <h1>{product.name}</h1>;
}

function CartApp() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<ProductList />} />
        <Route path="cart/:id" element={<ProductPage />} />
      </Routes>
    </BrowserRouter>
  );
}

export default CartApp;

Test yourself

Which hook reads the id from the URL?
- useParams
- useState
- useNavigate
- useLocation
Show answer

useParams — useParams returns URL parameters.

Route path

<Route path="____" element={<ProductPage />} />

Show answer

<Route path="cart/:id" element={<ProductPage />} />

Next lesson: Intermediate section exam

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies