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;
}

Алдыңғы сабақтың тапсырмасында жасаған қолданбаңызды алыңыз. Сабақ материалын пайдаланып, студент бетінің маршрутын түбірлік маршрутқа ішкі етіп жасаңыз.

Енді сілтемелерді басқан кезде экранда студенттер тізімі де, студенттің жеке беті де көрсетілуі үшін жасаңыз.