Добавяне на още един маршрут в React Router

Имаме основен маршрут, водещ към главната страница, на която имаме връзки за продукти. Нека сега добавим още един маршрут, така че при кликване върху една от връзките да се показва страница за продукта, а не екран за грешка.

За начало нека отворим нашето приложение, което правихме в предишните уроци и създадем в папката routes файл product.jsx. Нека направим в него компонент Product:

routes/product.jsxfunction Product() {}

export default Product;

Сега ще създадем вътре в Product обект product, със свойства name, cost и amount, засега това ще бъдат някакви фиксирани стойности:

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

export default Product;

И на страницата на продукта ще показваме, съответно, неговото име, цена и количество:

routes/product.jsxreturn (
  <div>
    <h2>Product page</h2>
    <p>Name: {product.name}</p>
    <p>Cost: {product.cost}</p>
    <p>Amount: {product.amount}</p>
  </div>
);

Задължително добавете импорт на компонента Product във файла main.jsx:

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

И накрая, ще добавим още един маршрут в нашето приложение, ще го направим веднага след основния. Като път посочете 'products/:productId', а като елемент за показване използваме компонента Product:

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

А сега стартираме приложението, кликаме върху връзките и се озоваваме на страницата на продукта (засега тя е една и съща за всички връзки), а не на страница за грешка.