Вгнездени рути во 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;
}

Земете ја апликацијата што ја создадовте во задачката од претходната лекција. Користејќи ги материјалите од лекцијата, направете ја рутата за страницата на студентот вгнездена во коренската.

А сега направете така што при клик на линковите на екранот да се прикажува и листата на студенти и страницата на студентот.