Vnořené trasy v React Router

V této lekci se seznámíme s vnořenými trasami. Spusťte aplikaci, kterou jsme dělali v minulé lekci. Klikáním na odkazy se dostaneme na samostatnou stránku s produktem. Předpokládejme, že nám to není pohodlné a chtěli bychom, aby se seznam produktů a stránka produktu zobrazovaly vedle sebe, na jedné obrazovce pro větší názornost. Pojďme to udělat.

K tomu otevřeme soubor main.jsx a jednoduše uděláme naši trasu pro stránku s produktem podřízenou trasou kořenové trasy nebo, jinými slovy, "vnoříme" ji do kořenové trasy. K tomu použijeme ještě jednu vlastnost objektu trasy children:

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

]);

Znovu klikáme na odkazy, ale napravo od seznamu produktů nic nevidíme. To proto, že jsme neřekli kořenové trase, kde chceme zobrazit její podřízené trasy.

Právě pro vykreslení elementů podřízených tras v rodičovském nám pomůže komponenta Outlet. Pojďme ji importovat z knihovny do souboru pro kořenovou trasu:

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

Poté jej obalme do divu #product a přidejme do rozvržení pro kořenovou trasu na konec verštace po uzavíracím tagu nav a celou konstrukci obalme ještě do jednoho divu #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>
);

Klikáním na odkazy nyní vidíme jak seznam produktů, tak stránku produktu.

Přidejme trochu stylů do našeho index.css:

h1, h2 {
	margin: 0;
}

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

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

Vezměte aplikaci, kterou jste vytvořili v úkolu k minulé lekci. Používejte materiály lekce a udělejte trasu pro stránku studenta vnořenou do kořenové.

A nyní udělejte to, aby při kliku na odkazy se na obrazovce zobrazoval jak seznam studentů, tak stránka studenta.