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

След това го обгърнете в div #product и го добавете в шаблона за кореновия маршрут в края на верстката след затварящия таг nav, а цялата конструкция се обгръща още в един div #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;
}

Вземете приложението, което сте създали в задачата към предишния урок. Използвайки материалите от урока, направете маршрута за страницата на студента вложен в кореновия.

А сега направете така, че при кликване върху връзките на екрана да се показват и списъкът със студенти и страницата на студента.