Beágyazott útvonalak a React Routerban

Ezen a leckén megismerkedünk a beágyazott útvonalak fogalmával. Indítsd el azt az alkalmazást, amit az előző leckén készítettünk. A linkekre kattintva egy külön oldalra kerülünk a termékkel. Tegyük fel, hogy ez kényelmetlen számunkra, és azt szeretnénk, ha a terméklista és a termékoldal egymás mellett, egy képernyőn jelenne meg a jobb áttekinthetőség érdekében. Végezzük ezt el.

Ehhez nyisd meg a main.jsx fájlt és egyszerűen tegyük a termékoldal útvonalát a gyökérútvonal gyermekútvonalává, vagy más szóval "ágyazzuk be" azt a gyökérútvonalba. Ehhez használjuk fel az útvonalobjektum egy másik tulajdonságát, a children-t:

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

]);

Ismét kattintsunk a linkekre, de a terméklistától jobbra nem látunk semmit. Ennek oka, hogy nem mondtuk meg a gyökérútvonalnak, hogy hol szeretnénk megjeleníteni a gyermek útvonalait.

Pontosan a gyermek útvonalak elemeinek megjelenítéséhez a szülő útvonalban segít a Outlet komponens. Importáljuk ezt a könyvtárból a gyökérútvonal fájljába:

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

Ezután csomagoljuk be egy #product div-be #product és adjuk hozzá a gyökérútvonal elrendezéséhez a versta végén, a nav záró tagja után, és az egész konstrukciót csomagoljuk még egy #main div-be #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>
);

A linkekre kattintva most már látjuk a terméklistát és a termékoldalt is.

Adjunk hozzá néhány stílust a index.css fájlunkhoz:

h1, h2 {
	margin: 0;
}

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

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

Vedd azt az alkalmazást, amit az előző leckéhez tartozó feladatban készítettél. A lecke anyagait felhasználva, teddd a diák oldalának útvonalát a gyökérbe ágyazott útvonalává.

És most arrangöld úgy, hogy a linkekre kattintva a képernyőn megjelenjen egyszerre mind a diákok listája, mind a diák oldala.