Sisäkkäiset reitit React Routerissa

Tällä oppitunnilla tutustumme sisäkkäisiin reitteihin. Käynnistä sovellus, jota teimme edellisellä oppitunnilla. Napsauttamalla linkkejä, pääsemme erilliselle tuotesivulle. Oletetaan, että se on meille hankalaa, ja toivoisimme, että tuotelista ja tuotesivu näkyisivät vierekkäin, yhdellä näytöllä paremman selkeyden vuoksi. Tehdään se niin.

Tätä varten avaamme tiedoston main.jsx ja teemme tuotesivun reitista pääreitin alireitin tai toisin sanoen "sisällytämme" sen pääreittiin. Käytämme tähän toista reittiolion ominaisuutta children:

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

]);

Napsautamme linkkejä uudelleen, mutta listan oikealla puolella tuotteista emme näe mitään. Syynä on, että emme kertoneet pääreitille, missä haluamme näyttää sen alireitit.

Tarkalleen alireittien elementtien renderöimiseksi vanhempaelementtiin auttaa meitä komponentti Outlet. Tuodaan se kirjastosta tiedostoon pääreittiä varten:

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

Sitten käärimme sen div-elementtiin #product ja lisäämme sen pääreitin layoutiin verstaan lopussa sulkevan tagin nav jälkeen, ja koko rakenteen käärimme vielä yhteen div-elementtiin #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>
);

Napsauttamalla linkkejä näemme nyt sekä tuotelistan että tuotesivun.

Lisätään hieman tyylejä meidän index.css-tiedostoon:

index.cssh1, h2 {
  margin: 0;
}

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

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