Geneste routes in React Router

In deze les maken we kennis met geneste routes. Start de applicatie die we in de vorige les hebben gemaakt. Door op de links te klikken, komen we op een aparte productpagina. Stel dat we het onhandig vinden dat het zo gaat, en we zouden willen dat de productlijst en de productpagina naast elkaar worden weergegeven, op één scherm voor meer duidelijkheid. Laten we het zo maken.

Laten we hiervoor het bestand main.jsx openen en onze route voor de productpagina simpelweg een child route van de root route maken, of met andere woorden, hem "nesten" in de root route. Hiervoor gebruiken we nog een eigenschap van het route object children:

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

]);

We klikken weer op de links, maar rechts van de productlijst zien we niets. Dit komt omdat we de root route niet hebben verteld waar we zijn child routes willen weergeven.

Precies voor het renderen van de child route elementen in de parent helpt de component Outlet ons. Laten we hem importeren uit de bibliotheek in het bestand voor de root route:

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

Laten we hem vervolgens in een div #product wrappen en toevoegen aan de layout voor de root route aan het einde van de markup na de sluitende tag nav, en de hele constructie nog eens wrappen in één 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>
);

Door op de links te klikken, zien we nu zowel de productlijst als de productpagina.

Laten we wat stijl toevoegen aan onze index.css:

h1, h2 {
	margin: 0;
}

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

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

Neem de applicatie die je hebt gemaakt in de opdracht bij de vorige les. Gebruikmakend van de lesmaterialen, maak de route voor de studentenpagina genest in de root.

En zorg er nu voor dat bij het klikken op de links zowel de studentenlijst als de studentenpagina op het scherm worden weergegeven.