Rotas aninhadas com React Router v4/v5

As rotas aninhadas permitem que você crie uma estrutura hierárquica para navegação dentro de seu aplicativo React. No React Router v4 e v5, você pode conseguir isso usando os componentes e .

Exemplo

Considere o exemplo a seguir, onde queremos dividir nosso aplicativo em frontend e áreas administrativas.

No exemplo acima, a primeira definição define as rotas frontend, enquanto a segunda define as rotas administrativas. Cada rota está associada a um componente que deve ser renderizado quando essa rota for acessada.

Considerações

No React Router v4, você não aninha componentes . Em vez disso, você os coloca em outro . Por exemplo:

Deve se tornar:

E o componente Topics seria definido da seguinte forma:

const Topics = ({ match }) => (
  

    
Topics
    
      Example topic
    
    
);

Essa estrutura permite mais flexibilidade e controle sobre o roteamento da sua aplicação.