Dodajanje dodatne poti v React Router

Imamo korensko pot, ki vodi na domačo stran, kjer imamo povezave za produkte. Dodajmo zdaj še eno pot, da bo ob kliku na eno od povezav prikazana stran za produkt, namesto zaslona z napako.

Za začetek odprimo našo aplikacijo, ki smo jo izdelali v prejšnjih lekcijah in ustvarimo v mapi routes datoteko product.jsx. Naredimo v njej komponento Product:

routes/product.jsxfunction Product() {}

export default Product;

Zdaj ustvarimo znotraj Product objekt product, z lastnostmi name, cost in amount, za zdaj bodo to nekatere fiksne vrednosti:

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

export default Product;

In na strani produkta bomo prikazali, ustrezno, njegovo ime, ceno in količino:

routes/product.jsxreturn (
  <div>
    <h2>Stran produkta</h2>
    <p>Ime: {product.name}</p>
    <p>Cena: {product.cost}</p>
    <p>Količina: {product.amount}</p>
  </div>
);

Obvezno dodajmo uvoz komponente Product v datoteko main.jsx:

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

In, končno, dodajmo še eno pot v našo aplikacijo, naredimo to takoj za korensko. Kot pot navedimo 'products/:productId', in kot element za prikaz imamo komponento Product:

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

In zdaj zaženemo aplikacijo, kliknemo na povezave in se znajdemo na strani produkta (za zdaj je enaka za vse povezave), namesto z napako.