React Router-da Ichki Marshrutlar

Ushbu darsda biz ichki marshrutlar bilan tanishamiz. Oldingi darsda qilgan ilovamizni ishga tushiring. Havolalar bosish orqali biz mahsulot sahifasiga o'tamiz. Faraz qilaylik, bu bizga qulay emas va biz mahsulotlar ro'yxati va mahsulot sahifasi yonma-yon, bir ekranda ko'rsatilishini xohlaymiz. Keling buni shunday qilaylik.

Buning uchun main.jsx faylini ochamiz va mahsulot sahifasi uchun marshrutimizni asosiy marshrutning pastki marshruti qilamiz yoki boshqacha qilib aytganda uni asosiy marshrutga "joylashtiramiz". Buning uchun marshrut obyektining yana bir xususiyati children dan foydalanamiz:

const router = createBrowserRouter([
	{
		path: '/',
		element: <Root />,
		errorElement: <ErrorPage404 />,
		children: [
			{
				path: 'products/:productId',
				element: <Product />,
			},
		],
	},

]);

Yana havollarni bosamiz, lekin mahsulotlar ro'yxatining o'ng tomonida hech narsa ko'rinmaydi. Buning sababi, biz asosiy marshrutga uning pastki marshrutlarini qayerda ko'rsatishimizni aytmadik.

Pastki marshrutlar elementlarini ota-marshrutda chizish uchun Outlet komponenti yordam beradi. Keling uni kutubxonadan asosiy marshrut fayliga import qilaylik:

import { Outlet } from 'react-router-dom';

Keyin uni #product div-iga o'rab chiqamiz va asosiy marshrut uchun maketga nav yopilgan teggidan keyin qo'shamiz, butun konstruksiyani yana bir #main div-iga o'rab chiqamiz:

return (
	<div id="main">
		<nav>
			<a href={`/products/1`}>Product1</a>
			<a href={`/products/2`}>Product2</a>
		</nav>
		<div id="product">
			<Outlet />
		</div>
	</div>
);

Havolarni bosish orqali, endi biz ham mahsulotlar ro'yxatini, ham mahsulot sahifasini ko'ramiz.

Keling, index.css faylimizga ozgina uslub qo'shamiz:

h1, h2 {
	margin: 0;
}

div#main {
	display: flex;
	margin: 20px;
}

div#product {
	margin-left: 40px;
}

Oldingi darsdagi vazifa uchun yaratgan ilovangizni oling. Dars materiallaridan foydalanib, talaba sahifasi uchun marshrutni asosiy marshrutga joylashtiring.

Endi esa, havollarni bosishda ekranda ham talabalar ro'yxati, ham talaba sahifasi ko'rsatilishini ta'minlang.