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:

main.jsxconst 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:

routes/root.jsximport { 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:

routes/root.jsxreturn (
  <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:

index.cssh1, h2 {
  margin: 0;
}

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

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