Ծածկված երթուղիներ 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;
}

Վերցրեք ձեր կողմից նախորդ դասի առաջադրանքի համար ստեղծված հավելվածը: Օգտագործելով դասի նյութերը՝ դարձրեք ուսանողի էջի երթուղին ծածկված արմատայինի մեջ:

Իսկ այժմ արեք այնպես, որ հղումներին կտտացնելիս էկրանին ցուցադրվի և՛ ուսանողների ցանկը, և՛ ուսանողի էջը: