Вложенные маршрутҳо дар 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;
}

Барномаеро, ки шумо дар вазифа ба дарси гузашта сохтаед, гиред. Бо истифода аз маводҳои дарс, маршрутро барои саҳифаи донишҷӯ ба маршрути решагӣ вложенный созед.

Ва ҳоло созед, то ки дар клики пайвандҳо дар экран намоиш дода шавад ва рӯйхати донишҷӯён ва саҳифаи донишҷӯ.