Pridanie ďalšej trasy v React Router

Máme koreňovú trasu, ktorá vedie na domovskú stránku, kde máme odkazy na produkty. Poďme teraz pridať ďalšiu trasu, aby sa pri kliknutí na jeden z odkazov zobrazila stránka produktu, a nie obrazovka s chybou.

Na začiatok otvorme našu aplikáciu, ktorú sme robili v predchádzajúcich lekciách a vytvorme v priečinku routes súbor product.jsx. Vytvorme v ňom komponent Product:

routes/product.jsxfunction Product() {}

export default Product;

Teraz vytvorme vnútri Product objekt product, s vlastnosťami name, cost a amount, zatiaľ to budú nejaké pevne nastavené hodnoty:

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

export default Product;

A na stránke produktu budeme zobrazovať, zodpovedajúcim spôsobom, jeho názov, cenu a množstvo:

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

Nezabudnime pridať import komponentu Product do súboru main.jsx:

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

A nakoniec, pridajme ďalšiu trasu do našej aplikácie, urobme to hneď po koreňovej. Ako cestu zadajme 'products/:productId', a ako element na zobrazenie nám slúži komponent Product:

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

A teraz spustíme aplikáciu, klikáme na odkazy a ocitneme sa na stránke s produktom (zatiaľ je rovnaká pre všetky odkazy), a nie s chybou.