Вложенные маршруты в React Router
На этом уроке мы познакомимся с вложенными маршрутами. Запустите приложение, которое мы делали на прошлом уроке. Кликая по ссылкам, мы попадаем на отдельную страничку с продуктом. Предположим, нам неудобно, чтобы так было, и нам бы хотелось, чтобы список с продуктами и страничка продукта отображались рядом, на одном экране для большей наглядности. Давайте сделаем так.
Для этого давайте откроем файл main.jsx
и просто сделаем наш маршрут для странички
с продуктом дочерним маршрутом корневого
маршрута или, другими словами "вложим" его
в корневой маршрут. Для этого воспользуемся
еще одним свойством объекта маршрута
children:
const router = createBrowserRouter([
{
path: '/',
element: <Root />,
errorElement: <ErrorPage404 />,
children: [
{
path: 'products/:productId',
element: <Product />,
},
],
},
]);
Кликаем по ссылкам снова, но справа от списка продуктов мы ничего не видим. Все потому, что мы не сказали корневому маршруту где мы хотим отобразить его дочерние маршруты.
Как раз для отрисовки элементов дочерних
маршрутов в родительском нам поможет компонент
Outlet. Давайте импортируем его из
библиотеки в файл для корневого маршрута:
import { Outlet } from 'react-router-dom';
Затем обернем его в див #product
и добавим в макет для корневого маршрута
в конце верстки после закрывающего тега
nav, а всю конструкцию обернем еще
в один див #main:
return (
<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:
h1, h2 {
margin: 0;
}
div#main {
display: flex;
margin: 20px;
}
div#product {
margin-left: 40px;
}
Возьмите приложение, созданное вами в задании к прошлому уроку. Пользуясь материалами урока, сделайте маршрут для странички студента вложенным в корневой.
А теперь сделайте так, чтобы при клике по ссылкам на экране отображался и список студентов и страничка студента.