Vnorené trasy v React Router

V tejto lekcii sa zoznámime s vnorenými trasami. Spustite aplikáciu, ktorú sme robili na predchádzajúcej lekcii. Kliknutím na odkazy sa dostaneme na samostatnú stránku s produktom. Predpokladajme, že je to pre nás nepohodlné a chceli by sme, aby zoznam produktov a stránka produktu boli zobrazené vedľa seba, na jednej obrazovke pre väčšiu názornosť. Poďme to urobiť.

Preto otvorme súbor main.jsx a jednoducho urobme našu trasu pre stránku s produktom podriadenou trasou koreňovej trasy alebo, inými slovami, "vnorte" ju do koreňovej trasy. Na to použijeme ďalšiu vlastnosť objektu trasy children:

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

]);

Klikáme na odkazy znova, ale napravo od zoznamu produktov nič nevidíme. Je to preto, že sme nepovedali koreňovej trase, kde chceme zobraziť jej podriadené trasy.

Práve na vykreslenie elementov podriadených trás v nadradenom nám pomôže komponent Outlet. Importujme ho z knižnice do súboru pre koreňovú trasu:

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

Potom ho obalme do div #product a pridajme do rozloženia pre koreňovú trasu na konci verštingu po zatváracom tagu nav, a celú konštrukciu obalme ešte do jedného 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>
);

Kliknutím na odkazy teraz vidíme aj zoznam produktov aj stránku produktu.

Pridajme trochu štýlov do nášho index.css:

h1, h2 {
	margin: 0;
}

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

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

Vezmite aplikáciu, ktorú ste vytvorili v úlohe k predchádzajúcej lekcii. Použitím materiálov z lekcie urobte trasu pre stránku študenta vnorenou do koreňovej.

A teraz urobte to, aby pri kliknutí na odkazy sa na obrazovke zobrazil aj zoznam študentov aj stránka študenta.