Kapslade rutter i React Router

I den här lektionen kommer vi att bekanta oss med kapslade rutter. Starta applikationen som vi skapade i förra lektionen. Genom att klicka på länkarna kommer vi till en separat produktsida. Anta att vi tycker att det är obekvämt att det är så, och vi skulle vilja att produktlistan och produktsidan visas sida vid sida, på en skärm för bättre överskådlighet. Låt oss göra så.

För att göra detta, låt oss öppna filen main.jsx och helt enkelt göra vår rutt för produktsidan till en underrutt till rotrundan eller, med andra ord "kapsla in" den i rotrundan. För detta använder vi oss av ytterligare en egenskap hos ruttobjektet children:

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

]);

Vi klickar på länkarna igen, men till höger om produktlistan ser vi ingenting. Det beror på att vi inte har sagt till rotrundan var vi vill rendera dess underrutters element.

För att rendera element från underrutterna i den föräldrarutt som hjälper oss komponenten Outlet. Låt oss importera den från biblioteket till filen för rotrundan:

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

Sedan lindar vi in den i en div #product och lägger till den i layouten för rotrundan i slutet av HTML-koden efter den avslutande taggen nav, och hela konstruktionen lindas in ytterligare i 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>
);

Genom att klicka på länkarna ser vi nu både produktlistan och produktsidan.

Låt oss lägga till lite styling i vår index.css:

h1, h2 {
	margin: 0;
}

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

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

Ta applikationen du skapade i uppgiften till förra lektionen. Använd materialet från lektionen och gör rutt för studentsidan kapslad i rotrundan.

Och gör nu så att när du klickar på länkarna visas både studentlistan och studentsidan på skärmen.