Gnezdene poti v React Router

V tej lekciji se bomo seznanili z gnezdene potmi. Zaženite aplikacijo, ki smo jo izdelali v prejšnji lekciji. S klikom na povezave pristanejo na ločeni strani s produktom. Recimo, da nam je tako neprijetno in želimo, da se seznam s produkti in stran produkta prikažeta drug ob drugem, na enem zaslonu za večjo preglednost. Naredimo tako.

Za to odprimo datoteko main.jsx in preprosto naredimo našo pot za stran z izdelkom podrejeno pot korenskega poti ali, z drugimi besedami, "gnezdimo" jo v korensko pot. Za to uporabimo še eno lastnost objekta poti children:

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

]);

Spet klikamo na povezave, vendar desno od seznama izdelkov ne vidimo nič. Vse zato, ker nismo korenski poti povedali kje želimo prikazati njene podrejene poti.

Prav za upodabljanje elementov podrejenih poti v starševski nam bo pomagal komponent Outlet. Importirajmo ga iz knjižnice v datoteko za korensko pot:

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

Nato ga ovijemo z div #product in dodamo v postavitev za korensko pot na koncu razporeditve po zaprtju oznake nav, celotno konstrukcijo pa ovijemo še v 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>
);

S klikom na povezave zdaj vidimo tako seznam izdelkov kot stran izdelka.

Dodajmo malo stilov v naš index.css:

h1, h2 {
	margin: 0;
}

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

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

Vzemite aplikacijo, ki ste jo ustvarili v nalogi za prejšnjo lekcijo. Z uporabo gradiva lekcije naredite pot za stran študenta gnezdno v korensko.

In zdaj naredite tako, da se ob kliku na povezave na zaslonu prikaže tako seznam študentov kot stran študenta.