Teekonna lisamine React Routeris

Meil on juurteekond, mis viib avalehele, kus meil on lingid toodete jaoks. Lisame nüüd veel ühe teekonna, nii et klikkides ühel lingil kuvatakse tooteleht, mitte veakuva.

Alustuseks avame oma rakenduse, mida me tegime eelmistel tundidel ja loome kaustas routes faili product.jsx. Teeme selles komponendi Product:

routes/product.jsxfunction Product() {}

export default Product;

Nüüd loome Product sees objekti product, omadustega name, cost ja amount, praegu on need mõned fikseeritud väärtused:

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

export default Product;

Ja tootelehel kuvame vastavalt selle nime, maksumuse ja koguse:

routes/product.jsxreturn (
  <div>
    <h2>Toote leht</h2>
    <p>Nimi: {product.name}</p>
    <p>Maksumus: {product.cost}</p>
    <p>Kogus: {product.amount}</p>
  </div>
);

Lisame kindlasti komponendi Product importimise faili main.jsx:

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

Ja lõpuks lisame oma rakendusse veel ühe teekonna, teeme selle kohe pärast juurteekonda. Teena määrame 'products/:productId', ja kuvatava elemendina on meil komponent Product:

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

Nüüd käivitame rakenduse, klikkime linkidel ja jõuame tootelehele (praegu on see meil kõikide linkide jaoks sama), mitte vealehele.