Rotas Aninhadas no React Router

Nesta lição, vamos nos familiarizar com as rotas aninhadas. Inicie o aplicativo que desenvolvemos na lição anterior. Clicando nos links, acessamos uma página separada com o produto. Suponha que isso seja inconveniente para nós e que gostaríamos que a lista de produtos e a página do produto fossem exibidas lado a lado, em uma única tela, para maior clareza. Vamos fazer isso.

Para isso, vamos abrir o arquivo main.jsx e simplesmente tornar nossa rota para a página do produto uma rota filha da rota raiz ou, em outras palavras, "aninhá-la" na rota raiz. Para isso, usaremos mais uma propriedade do objeto de rota children:

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

]);

Clicamos nos links novamente, mas à direita da lista de produtos não vemos nada. Isso porque não dissemos à rota raiz onde desejamos renderizar suas rotas filhas.

Para renderizar os elementos das rotas filhas no componente pai, o componente Outlet nos ajudará. Vamos importá-lo da biblioteca no arquivo da rota raiz:

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

Em seguida, vamos envolvê-lo em uma div #product e adicioná-lo ao layout da rota raiz no final do markup após a tag de fechamento nav, e envolver toda a estrutura em outra 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>
);

Clicando nos links, agora vemos tanto a lista de produtos quanto a página do produto.

Vamos adicionar alguns estilos ao nosso index.css:

h1, h2 {
	margin: 0;
}

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

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

Pegue o aplicativo criado por você na tarefa da lição anterior. Usando os materiais da lição, torne a rota para a página do estudante aninhada na rota raiz.

E agora faça com que, ao clicar nos links, a tela exiba tanto a lista de estudantes quanto a página do estudante.