Rutas anidadas y rutas dinámicas

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.