Укладзеныя маршруты ў 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;
}

Вазьміце дадатак, створанае вамі ў заданні да мінулага ўрока. Карыстаючыся матэрыяламі ўрока, зрабіце маршрут для старонкі студэнта ўкладзеным у карэнны.

А цяпер зрабіце так, каб пры кліку па спасылках на экране адлюстроўваўся і спіс студэнтаў і старонка студэнта.