Dodawanie kolejnej trasy w React Router

Mamy trasę główną, prowadzącą do strony głównej, na której mamy linki do produktów. Dodajmy teraz kolejną trasę, aby po kliknięciu w jeden z linków wyświetlała się strona produktu, a nie ekran błędu.

Na początek otwórzmy naszą aplikację, którą tworzyliśmy na poprzednich lekcjach i utwórzmy w folderze routes plik product.jsx. Stwórzmy w nim komponent Product:

routes/product.jsxfunction Product() {}

export default Product;

Teraz utwórzmy wewnątrz Product obiekt product, z właściwościami name, cost i amount, na razie będą to jakieś ustalone wartości:

routes/product.jsxfunction Product() {
  const product = {
    name: 'Product',
    cost: 400,
    amount: 5,
  };
}

export default Product;

Na stronie produktu będziemy wyświetlać, odpowiednio, jego nazwę, koszt i ilość:

routes/product.jsxreturn (
  <div>
    <h2>Strona produktu</h2>
    <p>Nazwa: {product.name}</p>
    <p>Koszt: {product.cost}</p>
    <p>Ilość: {product.amount}</p>
  </div>
);

Pamiętajmy, aby dodać import komponentu Product do pliku main.jsx:

main.jsximport Product from './routes/product';

I wreszcie, dodajmy kolejną trasę do naszej aplikacji, zróbmy to od razu po głównej. Jako ścieżkę podajmy 'products/:productId', a jako element do wyświetlenia niech będzie komponent Product:

main.jsx{
  path: '/',
  element: <Root />,
  errorElement: <ErrorPage404 />,
},
{
  path: 'products/:productId',
  element: <Product />,
},

A teraz uruchamiamy aplikację, klikamy w linki i trafiamy na stronę produktu (na razie jest ona taka sama dla wszystkich linków), a nie na stronę błędu.