Route Nidificate in React Router

In questa lezione faremo conoscenza con le route nidificate. Avvia l'applicazione che abbiamo creato nella lezione precedente. Cliccando sui link, arriviamo su una pagina separata con il prodotto. Supponiamo che questo non ci sia comodo e che vorremmo che l'elenco dei prodotti e la pagina del prodotto vengano visualizzati affiancati, su un unico schermo per maggiore chiarezza. Facciamolo.

Per fare questo, apriamo il file main.jsx e rendiamo semplicemente la nostra route per la pagina del prodotto una route figlia della route root o, in altre parole, "annidiamola" nella route root. Per fare questo, usiamo un'altra proprietà dell'oggetto route children:

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

]);

Clicchiamo di nuovo sui link, ma a destra dell'elenco prodotti non vediamo nulla. Questo perché non abbiamo indicato alla route root dove vogliamo visualizzare le sue route figlie.

Proprio per renderizzare gli elementi delle route figlie nel componente genitore, ci aiuterà il componente Outlet. Importiamolo dalla libreria nel file per la route root:

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

Poi lo wrapperemo in un div #product e lo aggiungeremo al layout per la route root alla fine del markup dopo il tag di chiusura nav, e wrapperemo l'intera struttura ancora in un 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>
);

Cliccando sui link, ora vediamo sia l'elenco dei prodotti che la pagina del prodotto.

Aggiungiamo un po' di stili al nostro index.css:

h1, h2 {
	margin: 0;
}

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

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

Prendi l'applicazione che hai creato nel compito della lezione precedente. Usando il materiale della lezione, rendi la route per la pagina dello studente annidata nella route root.

E ora fai in modo che quando si clicca sui link, sullo schermo vengano visualizzati sia l'elenco degli studenti che la pagina dello studente.