Ծածկված երթուղիներ React Router-ում

Այս դասում մենք կծանոթանանք ծածկված երթուղիներին: Գործարկեք այն հավելվածը, որը մենք արել էինք նախորդ դասին: Հղումներին կտտացնելով՝ մենք հայտնվում ենք ապրանքի առանձին էջում: Ենթադրենք, մեզ անհարմար է, որ այդպես է, և մենք կցանկանայինք, որ ապրանքների ցանկը և ապրանքի էջը ցուցադրվեին կողք կողքի, մեկ էկրանին, ավելի տեսանելի լինելու համար: Եկեք այդպես անենք:

Դրա համար եկեք բացենք main.jsx ֆայլը ու պարզապես դարձնենք ապրանքի էջի համար նախատեսված մեր երթուղին արմատային երթուղու զավակ երթուղի կամ, այլ կերպ ասած՝ «ծածկենք» այն արմատային երթուղու մեջ: Դրա համար կօգտագործենք երթուղու օբյեկտի ևս մեկ հատկություն՝ children:

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

]);

Կրկին կտտացնում ենք հղումներին, բայց ապրանքների ցանկից աջ մենք ոչինչ չենք տեսնում: Դրա պատճառն այն է, որ մենք արմատային երթուղուն չենք ասել, թե որտեղ ենք ցանկանում ցուցադրել նրա զավակ երթուղիները:

Զավակ երթուղիների էլեմենտները ծնողի մեջ նկարելու համար մեզ կօգնի Outlet կոմպոնենտը: Եկեք այն իմպորտենք գրադարանից դեպի արմատային երթուղու ֆայլ:

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

Այնուհետև փաթաթենք այն div #product -ի մեջ ու ավելացնենք արմատային երթուղու մակետի մեջ վերստի վերջում՝ nav փակվող թեգից հետո, և ամբողջ կոնստրուկցիան ևս մեկ 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>
);

Հղումներին կտտացնելով՝ այժմ մենք տեսնում ենք և՛ ապրանքների ցանկը, և՛ ապրանքի էջը:

Մեր index.css ֆայլին ավելացնենք մի քանի սթայլ:

index.cssh1, h2 {
  margin: 0;
}

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

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