Zagnieżdżone trasy w React Router

W tej lekcji zapoznamy się z zagnieżdżonymi trasami. Uruchom aplikację, którą robiliśmy w poprzedniej lekcji. Klikając w linki, trafiamy na osobną stronę z produktem. Załóżmy, że jest to dla nas niewygodne i chcielibyśmy, aby lista produktów i strona produktu wyświetlały się obok siebie, na jednym ekranie dla większej przejrzystości. Zróbmy to.

Aby to zrobić, otwórzmy plik main.jsx i po prostu uczyńmy naszą trasę dla strony produktu trasą potomną trasy głównej lub, innymi słowy "zagnieźdźmy" ją w trasę główną. W tym celu skorzystamy z jeszcze jednej właściwości obiektu trasy children:

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

]);

Klikamy ponownie w linki, ale po prawej stronie od listy produktów nic nie widzimy. To dlatego, że nie powiedzieliśmy trasie głównej gdzie chcemy renderować jej trasy potomne.

Właśnie do renderowania elementów tras potomnych w rodzicu pomoże nam komponent Outlet. Zaimportujmy go z biblioteki do pliku dla trasy głównej:

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

Następnie owińmy go w div #product i dodajmy do layoutu dla trasy głównej na końcu wersji po tagu zamykającym nav, a całą konstrukcję owińmy jeszcze w jeden div #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>
);

Klikając w linki, teraz widzimy zarówno listę produktów jak i stronę produktu.

Dodajmy trochę stylów do naszego index.css:

index.cssh1, h2 {
  margin: 0;
}

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

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