ჩადგმული მარშრუტები 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;
}

აიღეთ აპლიკაცია, რომელიც თქვენ შექმენით წინა გაკვეთილის დავალებაში. გაკვეთილის მასალების გამოყენებით, გახადეთ სტუდენტის გვერდის მარშრუტი ძირეულში ჩადგმული.

ახლა კი გააკეთეთ ისე, რომ ბმულებზე დაწკაპუნებისას ეკრანზე გამოჩნდეს როგორც სტუდენტების სია, ასევე სტუდენტის გვერდი.