Rutas anidadas con React Router v4/v5

Las rutas anidadas le permiten crear una estructura jerárquica para la navegación dentro de su aplicación React. En React Router v4 y v5, puede lograr esto usando los componentes y .

Ejemplo

Considere el siguiente ejemplo, donde queremos dividir nuestra aplicación en frontend y áreas de administración.

En el ejemplo anterior, la primera definición define las rutas frontend, mientras que la segunda define las rutas administrativas. Cada ruta está asociada con un componente que debe representarse cuando se accede a esa ruta.

Consideraciones

En React Router v4, no anida componentes . En lugar de ello, los coloca dentro de otro . Por ejemplo:

Debe convertirse en:

Y el componente Temas se definiría de la siguiente manera:

const Topics = ({ match }) => (
  

    
Topics
    
      Example topic
    
    
);

Esta estructura permite una mayor flexibilidad y control sobre el enrutamiento de su aplicación.