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

Утган дарснинг вазифасида яратган иловангизни олинг. Дарс материалларидан фойдаланиб, талаба саҳифаси учун йўлни илдизгига киритиб қуйинг.

Энди эса, талабалар рўйхати ва талаба саҳифаси ҳаволалар босилганда экранда кўриниши учун қилинг.