Vēl vienas maršruta pievienošana React Router

Mums ir saknes maršruts, kas ved uz galveno lapu, kurā mums ir produktu saites. Tagad pievienosim vēl vienu maršrutu, lai , noklikšķinot uz vienas no saitēm, mums tiktu parādīta produkta lapa, nevis kļūdas ekrāns.

Vispirms atveram mūsu lietotni, ko mēs izveidojām iepriekšējās nodarbībās un izveidosim mapē routes failu product.jsx. Izveidosim tajā komponentu Product:

routes/product.jsxfunction Product() {}

export default Product;

Tagad izveidosim iekš Product objektu product, ar īpašībām name, cost un amount, pagaidām tās būs dažas fiksētas vērtības:

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

export default Product;

Un produkta lapā mēs attēlosim, attiecīgi, tā nosaukumu, izmaksas un daudzumu:

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

Noteikti pievienosim komponenta Product importu failā main.jsx:

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

Un, beidzot, pievienosim vēl vienu maršrutu mūsu lietotnē, izdarīsim to uzreiz pēc saknes maršruta. Kā ceļu norādīsim 'products/:productId', un kā elementu attēlošanai mums darbojas komponents Product:

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

Tagad palaidām lietotni, noklikšķinām uz saitēm un nonākam uz produkta lapu (pagaidām tā mums ir vienāda visām saitēm), nevis ar kļūdu.