Vnořené trasy v React Router

V této lekci se seznámíme s vnořenými trasami. Spusťte aplikaci, kterou jsme dělali v minulé lekci. Klikáním na odkazy se dostaneme na samostatnou stránku s produktem. Předpokládejme, že nám to není pohodlné a chtěli bychom, aby se seznam produktů a stránka produktu zobrazovaly vedle sebe, na jedné obrazovce pro větší názornost. Pojďme to udělat.

K tomu otevřeme soubor main.jsx a jednoduše uděláme naši trasu pro stránku s produktem podřízenou trasou kořenové trasy nebo, jinými slovy, "vnoříme" ji do kořenové trasy. K tomu použijeme ještě jednu vlastnost objektu trasy children:

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

]);

Znovu klikáme na odkazy, ale napravo od seznamu produktů nic nevidíme. To proto, že jsme neřekli kořenové trase, kde chceme zobrazit její podřízené trasy.

Právě pro vykreslení elementů podřízených tras v rodičovském nám pomůže komponenta Outlet. Pojďme ji importovat z knihovny do souboru pro kořenovou trasu:

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

Poté jej obalme do divu #product a přidejme do rozvržení pro kořenovou trasu na konec verštace po uzavíracím tagu nav a celou konstrukci obalme ještě do jednoho divu #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>
);

Klikáním na odkazy nyní vidíme jak seznam produktů, tak stránku produktu.

Přidejme trochu stylů do našeho index.css:

index.cssh1, h2 {
  margin: 0;
}

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

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