Új útvonal hozzáadása a React Routerhoz

Van egy gyökér útvonalunk, ami a kezdőlapra vezet, ahol termékekre mutató linkek vannak. Most adjunk hozzá egy új útvonalat, hogy amikor rákattintunk az egyik linkre, a termék oldala jelenjen meg, és ne a hibaüzenet képernyője.

Először is nyissuk meg az alkalmazásunkat, amelyet az előző leckéken készítettünk, és hozzunk létre a routes mappában egy product.jsx fájlt. Készítsünk benne egy Product komponenst:

routes/product.jsxfunction Product() {}

export default Product;

Most hozzunk létre a Product komponensen belül egy product objektumot, name, cost és amount tulajdonságokkal, egyelőre legyenek ezek rögzített értékek:

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

export default Product;

És a termék oldalán ki fogjuk írni ennek megfelelően a nevét, az árát és a mennyiségét:

routes/product.jsxreturn (
  <div>
    <h2>Termék oldal</h2>
    <p>Név: {product.name}</p>
    <p>Ár: {product.cost}</p>
    <p>Mennyiség: {product.amount}</p>
  </div>
);

Ne felejtsük el hozzáadni a Product komponens importját a main.jsx fájlhoz:

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

És végül adjunk hozzá egy új útvonalat az alkalmazásunkhoz, tegyük ezt közvetlenül a gyökér útvonal után. Az útvonalként adjuk meg a 'products/:productId' értéket, a megjelenítendő elem pedig a Product komponens lesz:

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

Most indítsuk el az alkalmazást, kattintsunk a linkekre, és a termék oldalán kötünk ki (egyelőre ez minden link esetén ugyanaz), és nem a hibaoldalon.