Додавање још једне руте у 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>Страница производа</h2>
    <p>Име: {product.name}</p>
    <p>Цена: {product.cost}</p>
    <p>Количина: {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 />,
},

А сада покрећемо апликацију, клицамо на линкове и налазимо се на страници са производом (за сада је иста за све линкове), а не са грешком.