Beágyazott útvonalak a React Routerban

Ezen a leckén megismerkedünk a beágyazott útvonalak fogalmával. Indítsd el azt az alkalmazást, amit az előző leckén készítettünk. A linkekre kattintva egy külön oldalra kerülünk a termékkel. Tegyük fel, hogy ez kényelmetlen számunkra, és azt szeretnénk, ha a terméklista és a termékoldal egymás mellett, egy képernyőn jelenne meg a jobb áttekinthetőség érdekében. Végezzük ezt el.

Ehhez nyisd meg a main.jsx fájlt és egyszerűen tegyük a termékoldal útvonalát a gyökérútvonal gyermekútvonalává, vagy más szóval "ágyazzuk be" azt a gyökérútvonalba. Ehhez használjuk fel az útvonalobjektum egy másik tulajdonságát, a children-t:

main.jsxconst router = createBrowserRouter([
  {
    path: '/',
    element: <Root />,
    errorElement: <ErrorPage404 />,
    children: [
      {
        path: 'products/:productId',
        element: <Product />,
      },
    ],
  },

]);

Ismét kattintsunk a linkekre, de a terméklistától jobbra nem látunk semmit. Ennek oka, hogy nem mondtuk meg a gyökérútvonalnak, hogy hol szeretnénk megjeleníteni a gyermek útvonalait.

Pontosan a gyermek útvonalak elemeinek megjelenítéséhez a szülő útvonalban segít a Outlet komponens. Importáljuk ezt a könyvtárból a gyökérútvonal fájljába:

routes/root.jsximport { Outlet } from 'react-router-dom';

Ezután csomagoljuk be egy #product div-be #product és adjuk hozzá a gyökérútvonal elrendezéséhez a versta végén, a nav záró tagja után, és az egész konstrukciót csomagoljuk még egy #main div-be #main:

routes/root.jsxreturn (
  <div id="main">
    <nav>
      <a href={`/products/1`}>Product1</a>
      <a href={`/products/2`}>Product2</a>
    </nav>
    <div id="product">
      <Outlet />
    </div>
  </div>
);

A linkekre kattintva most már látjuk a terméklistát és a termékoldalt is.

Adjunk hozzá néhány stílust a index.css fájlunkhoz:

index.cssh1, h2 {
  margin: 0;
}

div#main {
  display: flex;
  margin: 20px;
}

div#product {
  margin-left: 40px;
}