Rute Îmbricate în React Router

În această lecție ne vom familiariza cu rutele îmbricate. Porniți aplicația pe care am făcut-o în lecția precedentă. Făcând clic pe linkuri, ajungem pe o pagină separată cu produsul. Să presupunem că nu ne este convenabil să fie așa și am dori ca lista cu produse și pagina produsului să fie afișate una lângă alta, pe același ecran pentru o mai bună claritate. Să facem asta.

Pentru aceasta, să deschidem fișierul main.jsx și să facem pur și simplu ruta noastră pentru pagina cu produsul o rută copil a rutei rădăcină sau, cu alte cuvinte, să o "îmbricăm" în ruta rădăcină. Pentru aceasta vom folosi încă o proprietate a obiectului rută children:

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

]);

Facem clic pe linkuri din nou, dar în dreapta listei de produse nu vedem nimic. Totul pentru că noi nu i-am spus rutei rădăcină unde vrem să afișăm rutele sale copil.

Tocmai pentru a reda elementele rutelor copil în părinte, ne va ajuta componenta Outlet. Să o importăm din bibliotecă în fișierul pentru ruta rădăcină:

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

Apoi să-l împachetăm într-un div #product și să-l adăugăm în layout-ul pentru ruta rădăcină la sfârșitul markup-ului după tag-ul de închidere nav, iar toată construcția să o mai împachetăm într-un 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>
);

Făcând clic pe linkuri, acum vedem atât lista de produse cât și pagina produsului.

Să adăugăm puțin stil în index.css:

h1, h2 {
	margin: 0;
}

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

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

Luați aplicația creată de dvs. în sarcina din lecția precedentă. Folosind materialele lecției, faceți ruta pentru pagina studentului una îmbricată în ruta rădăcină.

Și acum faceți astfel încât la clic pe linkuri pe ecran să fie afișate atât lista studenților cât și pagina studentului.