Ejercicio de programación con React: Rutas anidadas y rutas dinámicas

Código
Puntuación
0h 25m

React y rutas anidadas con React Router. Aprende a gestionar proyectos y tareas mediante rutas dinámicas con este ejercicio de programación en React.

En este reto, tu misión es crear una aplicación utilizando React junto con el paquete react-router-dom para gestionar un sistema de proyectos. El objetivo principal es implementar rutas anidadas y dinámicas, permitiendo al usuario navegar a través de diferentes secciones de la aplicación de manera fluida.

Tendrás que construir una estructura de navegación que incluya una página de inicio, una lista de proyectos y detalles individuales tanto para los proyectos como para las tareas que estos contengan. Las rutas deben estar configuradas de modo que permitan mostrar componentes de manera dinámica según la ruta activa. Para lograr esto, será imprescindible el uso del componente Outlet en las rutas anidadas, y del hook useParams para capturar los parámetros de la URL necesarios, como los identificadores de proyectos y tareas.

La aplicación no requiere conexión a una fuente de datos real, por lo que puedes utilizar un conjunto de datos simulados mediante arrays u objetos literales para representar los proyectos y las tareas.

Instrucciones:

  1. Define las siguientes rutas:
    • La ruta raíz / debe mostrar un componente Home con un mensaje de bienvenida.
    • La ruta /projects debe mostrar un componente ProjectList que liste todos los proyectos.
    • La ruta /projects/:projectId debe mostrar un componente ProjectDetail que incluya las tareas del proyecto especificado. Este componente debe utilizar rutas anidadas para mostrar detalles de cada tarea.
    • La ruta /projects/:projectId/tasks/:taskId debe mostrar un componente TaskDetail con información específica de la tarea seleccionada.
  2. Utiliza el componente Outlet en el componente ProjectDetail para renderizar los detalles de las tareas anidadas.
  3. Utiliza el hook useParams para acceder a los parámetros projectId y taskId en los componentes correspondientes.
  4. No se requiere implementar la obtención de datos reales. Puedes simular los datos de los proyectos y las tareas utilizando objetos literales o un array.
Empezar ejercicio de programación

Todos los ejercicios de programación de React

Evalúa tus conocimientos con ejercicios de programación en React de tipo Test, Puzzle, Código y Proyecto con VSCode.

Certificados de superación de React

Supera todos los retos de React y obtén estos certificados de superación para mejorar tu currículum y tu empleabilidad.

Tutorial para resolver este ejercicio de programación

React

React

Rutas anidadas y rutas dinámicas

Navegación y enrutamiento

Otros tutoriales de programación con React