Pesastatud marsruudid React Routeris

Selles õppetükis tutvume pesastatud marsruutidega. Käivitage rakendus, mida me tegime eelmisel õppetükil. Linkidele klõpsates jõuame eraldi lehele tootega. Oletame, et see pole meile mugav ja me sooviksime, et toodete nimekiri ja toodete lehekülg kuvataks kõrvuti, ühel ekraanil suurema selguse huvides. Teeme seda nii.

Selleks avame faili main.jsx ja teeme lihtsalt oma marsruudi tootelehekülje jaoks juurmarsruudi alamaks marsruudiks või teisisõnu "pestastame" selle juurmarsruuti. Selleks kasutame veel üht marsruudi objekti omadust children:

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

]);

Klõpsame uuesti linkide peale, aga toodete nimekirjast paremal me ei näe midagi. Kõik sellepärast, et me ei öelnud juurmarsruudile, kus me soovime kuvada tema alamaks marsruute.

Just alamaks marsruutide elementide renderdamiseks vanemrakenduses aitab meil komponent Outlet. Importime selle teegist faili juurmarsruudi jaoks:

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

Seejärel mähime selle div-i #product ja lisame selle juurmarsruudi maketti veeru lõpus pärast sulgevat silti nav, ja mähime kogu konstruktsiooni veel ühte div-i #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>
);

Linkidele klõpsates näeme nüüd nii toodete nimekirja kui ka toote lehekülge.

Lisame natuke stiile oma index.css faili:

h1, h2 {
	margin: 0;
}

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

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

Võtke rakendus, mille te lõite eelmise õppetüki ülesandes. Kasutades õppetüki materjale, tehke marsruut õpilase lehekülje jaoks pesastatud juurmarsruuti.

Ja nüüd tehke nii, et linkidele klõpsates kuvataks ekraanil nii õpilaste nimekiri kui ka õpilase lehekülg.