Добавление ещё одного маршрута в 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 />,
},

А теперь запускаем приложение, кликаем по ссылкам и оказываемся на страничке с продуктом (пока она у нас одинаковая для всех ссылок), а не с ошибкой.