Įdėtieji maršrutai React Router

Šioje pamokoje susipažinsime su įdėtaisiais maršrutais. Paleiskite aplikaciją, kurią darėme praeitoje pamokoje. Spustelėdami nuorodas, patekime į atskirą produkto puslapį. Tarkime, mums tai nepatogu, ir mums norėtųsi, kad produktų sąrašas ir produkto puslapis būtų rodomi greta, viename ekrane, kad būtų aiškiau. Padarykime taip.

Norėdami tai padaryti, atidarykite failą main.jsx ir tiesiog padarykite mūsų produkto puslapio maršrutą vaikiniu šakninio maršruto maršrutu arba, kitais žodžiais tariant, "įdėkite" jį į šakninį maršrutą. Tam panaudosime dar vieną maršruto objekto savybę children:

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

]);

Vėl spustelime nuorodas, bet dešinėje nuo produktų sąrašo nieko nematome. Taip yra dėl to, kad nesakėme šakniniam maršrutui, kur mes norime atvaizduoti jo vaikinius maršrutus.

Būtent vaikinių maršrutų elementų atvaizavimui tėvinėje komponento dalyje mums padės komponentas Outlet. Importuokime jį iš bibliotekos į šakninio maršruto failą:

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

Tada apgaubkime jį div #product ir įtraukime į šakninio maršruto maketą versto pabaigoje po uždarančios nav žymos, o visą konstrukciją apgaubkime dar vienu 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>
);

Dabar spustelėdami nuorodas matome ir produktų sąrašą, ir produkto puslapį.

Pridėkime šiek tiek stilių į mūsų index.css:

index.cssh1, h2 {
  margin: 0;
}

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

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