Innestede ruter i React Router

På denne leksjonen vil vi bli kjent med innestede ruter. Start applikasjonen som vi lagde i forrige leksjon. Ved å klikke på lenkene, kommer vi til en egen side med produktet. Anta at det er ubeleilig for oss at det er sånn, og vi ønsker at listen med produkter og produktsiden vises side om side, på én skjerm for bedre oversikt. La oss gjøre det slik.

For å gjøre dette, la oss åpne filen main.jsx og ganske enkelt gjøre ruten vår for produktsiden til en underordnet rute av hovedruten eller, med andre ord "plassere" den innenfor hovedruten. For dette vil vi bruke en annen egenskap av ruteobjektet children:

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

]);

Vi klikker på lenkene igjen, men til høyre for produktlisten ser vi ingenting. Det er fordi vi ikke har fortalt hovedruten hvor vi ønsker å vise dens underordnede ruter.

Nettopp for å gjengi elementene fra underordnede ruter i den foreldrede ruten, vil komponenten Outlet hjelpe oss. La oss importere den fra biblioteket i filen for hovedruten:

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

Deretter omslutter vi den i en div #product og legger den til i layouten for hovedruten på slutten av markup etter lukkingstagen nav, og omslutter hele konstruksjonen i ytterligere 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 å klikke på lenkene ser vi nå både produktlisten og produktsiden.

La oss legge til litt stiler i vår index.css:

h1, h2 {
	margin: 0;
}

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

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

Ta applikasjonen du opprettet i oppgaven til forrige leksjon. Ved å bruke materialet fra leksjonen, gjør ruten for studentsiden innestengt i hovedruten.

Og gjør nå slik at ved klikk på lenkene vises både studentlisten og studentsiden på skjermen.