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

Өткөн сабактагы тапшырмада жараткан колдонмонузду алыңыз. Сабагын материалын пайдаланып, студент баракчасы үчүн маршрутту негизгиге кирмаланган кылыңыз.

Эми эсеп кылып, шилтемелерге чыкылдаганда экранда студенттердин тизмеси да, студенттин баракчасы да көрсөтүлсүн.