1
resposta

Rotas descendants

Bom dia,
tenho algumas dúvidas sobre as novas rotas implementadas dentro do componente e as possibilidades de novas "subrotas".

Abaixo estou enviando os trechos de código correspondente para consulta.

Quando a rota "post/:id/" entra em ação, o componente é renderizado e por sua vez também implenta uma subrota (path="*") e a rota aninhada (index) que será renderizada no "placeholder" "Outlet" do componente , está correta esta interpretação?

Todas as "subrotas" implementadas pelo componente são tratados como "subrotas" a partir da rota "post/:id"?

Exemplo:
subrota da rota post/:id/:

será renderizado quando o path corresponder a /post/2/categoria/marketing

  • sendo /2/ o id do post
  • e /marketing/ o id da categoria
<Route path="categoria/:id_categoria" element={<Componente... />}>

ARQUIVO ROUTES.JS

        <Routes>
        
          <Route path='/' element={<PaginaPadrao />}>
             {/** inicio rotas filhas **/}
            <Route index           element={<Inicio   />} />
            <Route path="SobreMim" element={<SobreMim />} />
            {/** fim rotas filhas **/}
          </Route>
          
          {</** rotas adicionais */>}
          <Route path='post/:id/*' element={<Post          />} />
          <Route path="/*"        element={<NaoEncontrada />} />
          
        </Routes>

ARQUIVO POST/INDEX.JS:

        <Routes>
            <Route path="*" element={<PaginaPadrao />}>
                {/** a routa aninhada abaixo será renderizada no componente PaginaPadrao e no placeholder Outlet dentro do componente PaginaPadrao */}
                <Route index element={
                    <PostModelo fotoCapa={`/assets/posts/${post.id}/capa.png`} titulo={post.titulo}>
                        <div className="post-markdown-container">
                            <ReactMarkdown>
                                {post.texto}
                            </ReactMarkdown>
                        </div>
                    </PostModelo>
                }
                />
            </Route>
        </Routes>    
1 resposta

Oii, Eduardo! Tudo bem?

Suas interpretações estão bem encaminhadas. Vou confirmar ponto a ponto.

Sobre o path="post/:id/*" com um Routes descendente dentro do componente Post: sim, sua leitura está correta. O * no final da rota pai é o que permite que o React Router continue procurando rotas dentro do componente Post. Em outras palavras, ele “passa o bastão” para o Routes interno.

Sem esse *, caminhos mais profundos depois de /post/:id não seriam considerados, que é justamente o alerta mencionado na aula.

Dentro do componente Post, o path="*" captura qualquer caminho relativo a post/:id/. Já a rota index funciona como o conteúdo padrão, sendo renderizada quando não existe nenhum segmento adicional na URL. Nesse caso, ela aparece dentro do <Outlet /> do PaginaPadrao.

Também está certo pensar que todas as sub-rotas definidas dentro de Post são relativas a post/:id. Por exemplo:

<Route path="categoria/:id_categoria" element={<Componente />} />

Dentro do Routes de Post, essa rota corresponderia a uma URL como:

/post/2/categoria/marketing

Nesse exemplo, 2 é o id do post e marketing é o id_categoria.

Na prática, o fluxo fica assim:

/post/2

Essa URL encontra a rota post/:id/*, renderiza o componente Post e, dentro dele, o Routes interno encontra a rota index, exibindo o conteúdo padrão do post no <Outlet /> de PaginaPadrao.

Já nesta URL:

/post/2/categoria/marketing

A entrada inicial continua sendo post/:id/*, mas agora o Routes interno resolve a rota categoria/:id_categoria em vez da index.

Também criei um mapa mental com ajuda do Gemini. Veja se faz sentido para você:

Mapa mental sobre rotas descendentes no React Router

Conte com a Alura para evoluir seus estudos. Em caso de dúvidas, fico à disposição.

Bons estudos e sucesso! ✨

Imagem da comunidade