Geneste roetes in React Router

In hierdie les sal ons kennis maak met geneste roetes. Begin die aansoek wat ons laas les gedoen het. Deur op die skakels te kliek, kom ons op 'n aparte produkbladsy. Gestel, dit is vir ons ongerieflik en ons sou wou hê dat die produklys en die produkbladsy langs mekaar vertoon word, op een skerm vir beter duidelikheid. Kom ons doen dit so.

Hiervoor, laat ons die lêer main.jsx oopmaak en maak eenvoudig ons roete vir die produkbladsy 'n subroete van die wortelroete of, met ander woorde, "nest" dit in die wortelroete. Vir hierdie gebruik ons 'n ander eienskap van die roete-objek children:

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

]);

Ons kliek weer op die skakels, maar regs van die lys produkte sien ons niks. Dit is omdat ons nie vir die wortelroete gesê het waar ons sy subroetes wil vertoon nie.

Presies om die elemente van subroetes in die ouer te vertoon, sal die komponent Outlet ons help. Kom ons voer dit in vanuit die biblioteek in die lêer vir die wortelroete:

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

Omring dit dan met 'n div #product en voeg dit by die uitleg vir die wortelroete aan die einde van die opmaak na die sluitingsetikette nav, en omring die hele konstruksie nog met een 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>
);

Deur op die skakels te kliek, sien ons nou beide die produklys en die produkbladsy.

Kom ons voeg 'n bietjie style by in ons index.css:

h1, h2 {
	margin: 0;
}

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

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

Neem die aansoek wat jy geskep het in die opdrag van die vorige les. Deur gebruik te maak van die materiaal van die les, maak die roete vir die studentebladsy 'n geneste roete in die wortel.

Maak dit nou so dat met 'n kliek op die skakels, beide die studentelys en die studentebladsy op die skerm vertoon word.