Вложени маршрути в 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;
}