React Router-da Iç-içə Marşrutlar

Bu dərsdə biz iç-içə marşrutlar ilə tanış olacayıq. Keçən dərsdə etdiyimiz tətbiqi işə salın. Keçidlərə klikləyərək, biz ayrıca məhsul səhifəsinə düşürük. Tutaq ki, bizə bu belə rahat deyil və biz məhsulların siyahısı ilə məhsul səhifəsinin yan-yana, bir ekranda daha aydın olması üçün göstərilməsini istəyirik. Gəlin bunu edək.

Bunun üçün gəlin main.jsx faylını açaq və sadəcə məhsul səhifəsi üçün olan marşrutumuzu kök marşrutun uşaq marşrutu edək və ya başqa sözlə, onu kök marşruta "yerləşdirək". Bunun üçün marşrut obyektinin başqa bir xüsusiyyəti olan children-dan istifadə edək:

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

]);

Yenidən keçidlərə klikləyirik, amma məhsulların siyahısının sağında heç nə görmürük. Bunun səbəbi odur ki, biz kök marşruta onun uşaq marşrutlarını harada göstərmək istədiyimizi deməmişik.

Məhz valideyn marşrutunda uşaq marşrutlarının elementlərini göstərmək üçün bizə Outlet komponenti kömək edəcək. Gəlin onu kitabxanadan kök marşrut üçün olan fayla import edək:

import { Outlet } from 'react-router-dom';

Sonra onu #product div-inə sarıyıb və kök marşrutun leout-unun sonunda, nav bağlanan teqindən sonra əlavə edək, bütün konstruksiyanı isə başqa bir #main div-inə sarıq:

return (
	<div id="main">
		<nav>
			<a href={`/products/1`}>Product1</a>
			<a href={`/products/2`}>Product2</a>
		</nav>
		<div id="product">
			<Outlet />
		</div>
	</div>
);

Keçidlərə klikləyərək, indi biz həm məhsulların siyahısını, həm də məhsul səhifəsini görürük.

Gəlin index.css faylımıza bir az stil əlavə edək:

h1, h2 {
	margin: 0;
}

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

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

Əvvəlki dərsin tapşırığında yaratdığınız tətbiqi götürün. Dərs materiallarından istifadə edərək, tələbə səhifəsi üçün olan marşrutu kök marşrutun içinə yerləşdirin.

İndi isə elə edin ki, keçidləri kliklədikdə ekranda həm tələbələrin siyahısı, həm də tələbə səhifəsi göstərilsin.