Rrugët e mbivendosura në React Router

Në këtë mësim do të njihemi me rrugët e mbivendosura . Nisni aplikacionin që kemi bërë në mësimin e kaluar. Duke klikuar në lidhje, ne hyjmë në një faqe të veçantë me produktin. Supozoni, është e papërshtatshme për ne që të jetë kështu, dhe ne do të dëshironim që lista e produkteve dhe faqja e produktit të shfaqen krah për krah, në një ekran të vetëm për më shumë qartësi. Le ta bëjmë këtë.

Për këtë, le të hapim skedarin main.jsx dhe thjesht ta bëjmë rrugën tonë për faqen e produktit një rrugë fëmijë e rrugës rrënjësore ose, me fjalë të tjera ta "vendosim" atë brenda rrugës rrënjësore. Për këtë do të përdorim një veçori tjetër të objektit të rrugës children:

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

]);

Klikojmë përsëri në lidhje, por në të djathtë të listës së produkteve ne nuk shohim asgjë. Kjo sepse ne nuk i kemi thënë rrugës rrënjësore ku ne dëshirojmë të shfaqim rrugët e saj fëmijë.

Pikërisht për të vizatuar elementët e rrugëve fëmijë në prindin, komponenti Outlet do të na ndihmojë. Le ta importojmë atë nga biblioteka në skedarin për rrugën rrënjësore:

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

Pastaj le ta mbështjellim atë në një div #product dhe ta shtojmë në skemën për rrugën rrënjësore në fund të faqosjes pas tagut mbyllës nav, dhe të gjithë konstruktin ta mbështjellim në një div tjetër #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>
);

Duke klikuar në lidhje, tani ne shohim edhe listën e produkteve edhe faqen e produktit.

Le të shtojmë pak stile në tonën index.css:

h1, h2 {
	margin: 0;
}

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

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

Merrni aplikacionin e krijuar nga ju në detyrën e mësimit të kaluar. Duke përdorur materialet e mësimit, bëni rrugën për faqen e studentit të mbivendosur në rrugën rrënjësore.

Dhe tani bëni që kur klikohet në lidhje në ekran të shfaqet edhe lista e studentëve edhe faqja e studentit.