Rutas anidadas en React Router

En esta lección nos familiarizaremos con las rutas anidadas. Inicie la aplicación que creamos en la lección anterior. Al hacer clic en los enlaces, llegamos a una página separada con el producto. Supongamos que nos resulta incómodo que sea así, y nos gustaría que la lista de productos y la página del producto se mostraran una al lado de la otra, en una misma pantalla para mayor claridad. Hagámoslo así.

Para ello, abramos el archivo main.jsx y simplemente hagamos que nuestra ruta para la página del producto sea una ruta hija de la ruta raíz o, en otras palabras, "anidémosla" en la ruta raíz. Para ello, utilicemos otra propiedad del objeto de ruta children:

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

]);

Hacemos clic en los enlaces nuevamente, pero a la derecha de la lista de productos no vemos nada. Esto se debe a que no le hemos indicado a la ruta raíz dónde queremos mostrar sus rutas hijas.

Precisamente para renderizar los elementos de las rutas hijas en el componente padre, nos ayudará el componente Outlet. Importémoslo desde la biblioteca en el archivo para la ruta raíz:

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

Luego, envolvámoslo en un div #product y agreguémoslo al diseño de la ruta raíz al final del markup después de la etiqueta de cierre nav, y envolvamos toda la construcción en otro 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>
);

Al hacer clic en los enlaces, ahora vemos tanto la lista de productos como la página del producto.

Agreguemos algunos estilos a nuestro index.css:

h1, h2 {
	margin: 0;
}

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

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

Tome la aplicación que creó en la tarea de la lección anterior. Usando los materiales de la lección, convierta la ruta para la página del estudiante en una ruta anidada dentro de la ruta raíz.

Y ahora haga que al hacer clic en los enlaces, en la pantalla se muestre tanto la lista de estudiantes como la página del estudiante.