Přidání další trasy do React Router

Máme kořenovou trasu vedoucí na hlavní stránku, na které máme odkazy na produkty. Pojďme nyní přidat další trasu, aby při kliknutí na jeden z odkazů zobrazovala stránka produktu, a ne obrazovku s chybou.

Pro začátek otevřeme naši aplikaci, kterou jsme vytvářeli v předchozích lekcích a vytvořme ve složce routes soubor product.jsx. Vytvořme v něm komponentu Product:

routes/product.jsxfunction Product() {}

export default Product;

Nyní vytvoříme uvnitř Product objekt product, s vlastnostmi name, cost a amount, prozatím to budou nějaké pevné hodnoty:

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

export default Product;

A na stránce produktu budeme zobrazovat, odpovídajícím způsobem, jeho název, cenu a množství:

routes/product.jsxreturn (
  <div>
    <h2>Stránka produktu</h2>
    <p>Název: {product.name}</p>
    <p>Cena: {product.cost}</p>
    <p>Množství: {product.amount}</p>
  </div>
);

Nezapomeňme přidat import komponenty Product do souboru main.jsx:

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

A konečně, přidejme další trasu do naší aplikace, udělejme to ihned po kořenové. Jako cestu uvedeme 'products/:productId', a jako element pro zobrazení u nás vystupuje komponenta Product:

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

A nyní spustíme aplikaci, klikneme na odkazy a ocitneme se na stránce s produktem (prozatím je u nás stejná pro všechny odkazy), a ne s chybou.