Toinen reitin lisääminen React Routeriin

Meillä on juurireitti, joka johtaa etusivulle, jolla on linkkejä tuotteisiin. Lisätään nyt toinen reitti, jotta kun klikkaamme yhtä linkeistä, näemme tuotesivun virhesivun sijaan.

Aluksi avataan sovelluksemme, jota teimme edellisillä tunneilla ja luodaan kansioon routes tiedosto product.jsx. Tehdään siitä komponentti Product:

routes/product.jsxfunction Product() {}

export default Product;

Luodaan nyt Product:n sisälle olio product, ominaisuuksilla name, cost ja amount, toistaiseksi nämä ovat kiinteitä arvoja:

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

export default Product;

Ja tuotesivulla näytämme vastaavasti sen nimen, hinnan ja määrän:

routes/product.jsxreturn (
  <div>
    <h2>Tuotesivu</h2>
    <p>Nimi: {product.name}</p>
    <p>Hinta: {product.cost}</p>
    <p>Määrä: {product.amount}</p>
  </div>
);

Lisätään välttämättä Product-komponentin importti tiedostoon main.jsx:

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

Ja lopuksi lisätään toinen reitti sovellukseemme, tehdään se heti juurireitin jälkeen. Poluksi aseta 'products/:productId', ja elementiksi näytettäväksi on Product-komponentti:

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

Ja nyt käynnistetään sovellus, klikataan linkkejä ja päädymme tuotesivulle (toistaiseksi se on sama kaikille linkeille), eikä virhesivulle.