Zagnieżdżone trasy w React Router

W tej lekcji zapoznamy się z zagnieżdżonymi trasami. Uruchom aplikację, którą robiliśmy w poprzedniej lekcji. Klikając w linki, trafiamy na osobną stronę z produktem. Załóżmy, że jest to dla nas niewygodne i chcielibyśmy, aby lista produktów i strona produktu wyświetlały się obok siebie, na jednym ekranie dla większej przejrzystości. Zróbmy to.

Aby to zrobić, otwórzmy plik main.jsx i po prostu uczyńmy naszą trasę dla strony produktu trasą potomną trasy głównej lub, innymi słowy "zagnieźdźmy" ją w trasę główną. W tym celu skorzystamy z jeszcze jednej właściwości obiektu trasy children:

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

]);

Klikamy ponownie w linki, ale po prawej stronie od listy produktów nic nie widzimy. To dlatego, że nie powiedzieliśmy trasie głównej gdzie chcemy renderować jej trasy potomne.

Właśnie do renderowania elementów tras potomnych w rodzicu pomoże nam komponent Outlet. Zaimportujmy go z biblioteki do pliku dla trasy głównej:

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

Następnie owińmy go w div #product i dodajmy do layoutu dla trasy głównej na końcu wersji po tagu zamykającym nav, a całą konstrukcję owińmy jeszcze w jeden 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>
);

Klikając w linki, teraz widzimy zarówno listę produktów jak i stronę produktu.

Dodajmy trochę stylów do naszego index.css:

h1, h2 {
	margin: 0;
}

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

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

Weź aplikację stworzoną przez Ciebie w zadaniu do poprzedniej lekcji. Korzystając z materiałów lekcji, uczyń trasę dla strony studenta zagnieżdżoną w trasie głównej.

A teraz spraw, aby przy kliknięciu w linki na ekranie wyświetlał się zarówno lista studentów jak i strona studenta.