Iegultās maršruti React Router

Šajā nodarbībā mēs iepazīsimies ar iegultajiem maršrutiem. Palaidiet lietotni, ko mēs veidojām iepriekšējā nodarbībā. Noklikšķinot uz saitēm, mēs nonākam atsevišķā produktu lapā. Pieņemsim, ka mums tas ir neērti, un mēs vēlētos, lai produktu saraksts un produkta lapa tiktu rādīti blakus, uz viena ekrana, lai būtu pārskatāmāk. Darīsim tā.

Lai to izdarītu, atvērsim failu main.jsx un vienkārši padarīsim mūsu maršrutu produkta lapai par saknes maršruta pakārtoto maršrutu jeb, citiem vārdiem sakot, "iegulstam" to saknes maršrutā. Lai to izdarītu, izmantosim vēl vienu maršruta objekta īpašību children:

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

]);

Noklikšķinam vēlreiz uz saitēm, bet pa labi no saraksta ar produktiem mēs neko neredzam. Tas ir tāpēc, ka mēs neesam norādījuši saknes maršrutam, kur mēs vēlamies attēlot tā pakārtotos maršrutus.

Tieši pakārtoto maršrutu elementu attēlošanai vecākajā maršrutā mums palīdzēs komponents Outlet. Importēsim to no bibliotēkas failā saknes maršrutam:

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

Pēc tam ietīsim to div #product un pievienosim saknes maršruta izkārtojumam markup beigās aiz aizverošā taga nav, un visu konstrukciju ietīsim vēl vienā 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>
);

Noklikšķinot uz saitēm, tagad mēs redzam gan produktu sarakstu, gan produkta lapu.

Pievienosim mazliet stilus mūsu index.css:

h1, h2 {
	margin: 0;
}

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

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

Paņemiet lietotni, ko izveidojāt iepriekšējās nodarbības uzdevumā. Izmantojot nodarbības materiālus, padariet maršrutu studenta lapai par iegultu saknes maršrutā.

Un tagad dariet tā, lai, noklikšķinot uz saitēm, ekrānā tiktu parādīts gan studentu saraksts, gan studenta lapa.