Ugnježdene rute u React Router-u

U ovoj lekciji ćemo se upoznati sa ugnježdenim rutama. Pokrenite aplikaciju koju smo pravili u prošloj lekciji. Klikom na linkove, dolazimo na zasebnu stranicu sa proizvodom. Pretpostavimo da nam je to neprikladno, i želimo da se lista sa proizvodima i stranica proizvoda prikazuju jedan pored drugog, na jednom ekranu, radi bolje preglednosti. Hajde da to uradimo.

Za ovo, hajde da otvorimo fajl main.jsx i jednostavno učinimo našu rutu za stranicu proizvoda podređenom rutom korenske rute ili, drugim rečima, "ugnjezdimo" je u korensku rutu. Za ovo ćemo koristiti još jedno svojstvo objekta rute children:

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

]);

Ponovo klikamo na linkove, ali desno od liste proizvoda ništa ne vidimo. Sve zato što nismo rekli korenskoj ruti gde želimo da prikažemo njene podređene rute.

Upravo za renderovanje elemenata podređenih ruta u roditeljskoj ruti pomoći će nam komponenta Outlet. Hajde da je importujemo iz biblioteke u fajl za korensku rutu:

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

Zatim ćemo je obmotiti u div #product i dodati u layout za korensku rutu na kraju verziranja nakon zatvarajuće oznake nav, a celu konstrukciju ćemo obmotiti u još jedan 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>
);

Klikom na linkove, sada vidimo i listu proizvoda i stranicu proizvoda.

Dodajmo malo stilova u naš index.css:

h1, h2 {
	margin: 0;
}

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

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

Uzmite aplikaciju koju ste kreirali u zadatku za prošlu lekciju. Koristeći materijale iz lekcije, učinite rutu za stranicu studenta ugnježdenom u korensku.

A sada uradite tako da se pri kliku na linkove na ekranu prikazuje i lista studenata i stranica studenta.