Ejercicio de programación con React: Rutas anidadas y rutas dinámicas
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:
- Define las siguientes rutas:
- La ruta raíz
/
debe mostrar un componenteHome
con un mensaje de bienvenida. - La ruta
/projects
debe mostrar un componenteProjectList
que liste todos los proyectos. - La ruta
/projects/:projectId
debe mostrar un componenteProjectDetail
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 componenteTaskDetail
con información específica de la tarea seleccionada.
- La ruta raíz
- Utiliza el componente
Outlet
en el componenteProjectDetail
para renderizar los detalles de las tareas anidadas. - Utiliza el hook
useParams
para acceder a los parámetrosprojectId
ytaskId
en los componentes correspondientes. - 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.
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.
Props y manejo de datos entre componentes
Definición y manejo de rutas
Conocimiento general de React
Galería de imágenes en React
Eventos en React
Gestor de tareas con React
Custom Hooks para servicios compartidos
Nuevos métodos create de React Router
Solicitudes HTTP con Fetch API
Instalar React y crear nuevo proyecto
Renderizado condicional
Introducción a JSX
Manejo de clases y estilos
Introducción a React Router
Solicitudes HTTP con Axios
Estado local con useState y useReducer
Estado global con Redux Toolkit
Estado y ciclo de vida de los componentes
Hooks para gestión de estado complejo y contexto
Componentes funcionales
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
Rutas anidadas y rutas dinámicas
Navegación y enrutamiento