Migrar a React Router Dom 6 en un proyecto como Todo Machine no se trata solo de instalar la librería: implica repensar cómo organizas tus carpetas para que cada vista, componente y hook viva en el lugar correcto. Aquí aprendes a reorganizar tu estructura de archivos para soportar rutas dinámicas, separar componentes de UI generales de los específicos y dejar tu proyecto listo para escalar.

¿Por qué cambiar la estructura de carpetas al añadir rutas?

Cuando tu aplicación pasa de tener una sola vista a varias, mantener todos los componentes sueltos en src deja de tener sentido. Necesitas una jerarquía que refleje qué pertenece a cada vista y qué se comparte entre todas.

La idea es simple: si un componente solo se usa en una ruta, vive con esa ruta. Si lo usas en varias, vive en una carpeta general. Esto vale también para React Hooks y helpers.

¿Qué es React Router Dom? Es la librería que te permite crear rutas y vistas en una aplicación de React, manejando la navegación sin recargar la página.

¿Qué carpetas crear para organizar tus vistas?

La propuesta de Juan DC para Todo Machine, vista alrededor de [2:00], se basa en dos carpetas principales dentro de src:

• UI: aquí van los componentes que se reutilizan en varias rutas, como Modal, EmptyTodos, CreateTodoButton o ChangeAlert.
• Routes: aquí vive cada vista de tu aplicación, con su propio archivo y, si aplica, sus componentes exclusivos.

Dentro de Routes creas una subcarpeta por vista: Home, New, Edit. Cada una contiene su propio archivo, por ejemplo HomePage.js, NewTodoPage.js y EditTodoPage.js.

¿Cómo migrar el componente App a la nueva estructura?

El antiguo App.js se transforma en dos cosas distintas. Por un lado, su contenido original (la vista principal con los todos) pasa a ser HomePage.js dentro de Routes/Home. Por otro lado, creas un nuevo App.js directamente en Routes, que ahora se encarga únicamente de declarar las rutas.

Un detalle útil que aparece alrededor de [4:30]: cuando arrastras archivos en Visual Studio Code, el editor te ofrece actualizar automáticamente los imports. Acepta con cuidado, porque a veces anida carpetas donde no deberían ir.

¿Cómo declarar rutas con HashRouter en React Router Dom 6?

Una vez tienes los tres componentes de vista listos, el nuevo App.js queda como el orquestador de rutas. La estructura mínima usa tres piezas: HashRouter, Routes y Route.

jsx import { HashRouter, Routes, Route } from 'react-router-dom'; import { HomePage } from './Home/HomePage'; import { NewTodoPage } from './New/NewTodoPage'; import { EditTodoPage } from './Edit/EditTodoPage';

function App() { return ( <HashRouter> <Routes> <Route path="/" element={<HomePage />} /> <Route path="/new" element={<NewTodoPage />} /> <Route path="/edit/:id" element={<EditTodoPage />} /> <Route path="*" element={<p>Not Found</p>} /> </Routes> </HashRouter> ); }

export { App };

¿Por qué usar rutas dinámicas con un ID en lugar del texto?

La ruta de edición se declara como /edit/:id y no como /edit/texto-del-todo. ¿La razón? Si tu todo dice algo como cortarle las uñas a las michis porque están muy largas, la URL se vuelve gigante y el encode transforma los espacios en caracteres difíciles de manejar.

La solución es identificar cada todo con un ID generado dinámicamente y leerlo después con el hook useParams de React Router Dom. Esto cambia la lógica de identificación que venía desde cursos anteriores, donde los todos se reconocían por su texto.

¿Qué hace useParams en React Router? Es un hook que extrae los valores dinámicos de la URL, como el :id de /edit/:id, para usarlos dentro de tu componente.

¿Qué hacer con las rutas no encontradas?

Si un usuario entra a una URL que no definiste, React Router lanza un warning en consola diciendo que no sabe qué renderizar. La solución es agregar una ruta comodín con path="*" que muestre un componente de Not Found, aunque sea un párrafo simple mientras decides darle más estilo.

¿Cómo arreglar los imports después de mover archivos?

Al mover HomePage.js dos niveles más adentro, todos los imports que apuntaban a la antigua estructura dejan de funcionar. Tienes dos rutas relativas que ajustar:

1. Hooks compartidos como useTodos: viven una carpeta atrás, porque los usarás también en las vistas de crear y editar.
2. Componentes de UI: ahora están en ../../ui/, dos niveles arriba y luego dentro de la carpeta general.

Este momento, alrededor de [11:00], es ideal para considerar alias de imports. En lugar de escribir ../../ui/Modal, podrías configurar @ui/Modal y olvidarte de contar carpetas. Es un patrón muy común en proyectos que crecen.

¿Qué pasa con la versión de React que usas?

Todo Machine corre sobre React 17, según lo declarado en el package.json. Esto importa porque la sintaxis de ReactDOM.render en el index.js principal es diferente a la de React 18, que usa createRoot. Mientras no actualices la versión, mantén el render clásico.

El index.js principal ahora importa el App desde ./Routes/App en lugar de la antigua carpeta App. Un cambio pequeño pero necesario para que todo siga funcionando.

¿Qué sigue después de configurar las rutas?

Con la estructura lista y las tres rutas respondiendo, el siguiente paso es migrar la lógica de los modales hacia vistas reales. El botón CreateTodoButton dejará de abrir un modal y pasará a navegar hacia /new, donde vivirá el formulario de creación.

Lo mismo aplica para editar: necesitarás un botón en cada todo que enlace a /edit/:id, recupere el texto original y lo cargue dentro de un text area para modificarlo.

Cuéntame en los comentarios qué estructura de carpetas usabas antes y cuál vas a adoptar ahora en tu proyecto.