Indlejrede ruter i React Router

I denne lektion vil vi stifte bekendtskab med indlejrede ruter. Start applikationen, som vi lavede i forrige lektion. Ved at klikke på linkene, kommer vi til en separat side med produktet. Antag, at vi synes det er ubelejligt, at det forløber sådan, og vi ønsker, at produktlisten og produktsiden vises side om side, på én skærm for større klarhed. Lad os gøre det på den måde.

For at gøre dette, lad os åbne filen main.jsx og blot gøre vores rute for produktsiden til en underordnet rute af rodruten eller med andre ord "indlejre" den i rodruten. For at gøre dette bruger vi endnu en egenskab af ruteobjektet children:

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

]);

Vi klikker på linkene igen, men til højre for listen over produkter ser vi intet. Det er fordi, at vi ikke har fortalt rodruten, hvor vi ønsker at vise dens underordnede ruter.

Netop for at gengive elementerne fra de underordnede ruter i den forældrede rute, vil komponenten Outlet hjælpe os. Lad os importere den fra biblioteket i filen for rodruten:

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

Dernæst indpakker vi den i en div #product og tilføjer den til layoutet for rodruten slutningen af markup efter lukketaget nav, og indpakker hele konstruktionen i endnu en 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>
);

Ved at klikke på linkene ser vi nu både produktlisten og produktsiden.

Lad os tilføje lidt styling til vores index.css:

h1, h2 {
	margin: 0;
}

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

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

Tag applikationen, som du oprettede i opgaven til forrige lektion. Brug materialet fra lektionen til at gøre ruten for studerendesiden indlejret i rodruten.

Og gør nu sådan, at når der klikkes på linkene, vises både listen over studerende og studerendesiden på skærmen.