Cambiar un modal por una ruta dedicada en React Router transforma la experiencia de tu aplicación: pasas de superponer ventanas a navegar entre URLs reales como /new o /edit/:id. Esta práctica con un proyecto de TODOs te muestra cómo migrar de portales a navegación con useNavigate, reutilizando el mismo formulario para crear y editar tareas.

¿Por qué reemplazar un modal por una ruta en React?

Un modal vive sobre la página actual y depende de un estado como openModal. Una ruta, en cambio, te da una URL compartible, historial de navegación y separación clara entre vistas. Al matar los portales, eliminas estados como setOpenModal y los cambias por llamadas a navigate('/new') o navigate('/edit/' + id).

La migración empieza limpiando el homepage.js: se eliminan referencias a modal, portal, openModal y setOpenModal. El botón que antes abría el modal ahora dispara una navegación.

¿Qué hace useNavigate en React Router Dom? Es un hook que devuelve una función para cambiar de ruta programáticamente. La llamas como navigate('/new') dentro de un onClick y rediriges al usuario sin recargar la página.

¿Cómo usar useNavigate para cambiar de ruta con un onClick?

La importación se hace desde react-router-dom y conviene ubicarla arriba del archivo, junto a las dependencias externas, antes de las internas [04:12].

js import { useNavigate } from 'react-router-dom';

const navigate = useNavigate();

Después, el CreateTodoButton deja de recibir setOpenModal y pasa a recibir un onClick directo. Dentro del componente, en la carpeta ui/CreateTodoButton, se reemplaza la función interna que alternaba el estado por props.onClick. Así el botón se vuelve agnóstico: hoy navega, mañana puede hacer cualquier cosa.

¿Cómo se concatena un id en una ruta dinámica?

Para editar un TODO específico no basta con /edit, porque esa ruta no existe sola. Se concatena el identificador así:

js navigate('/edit/' + todo.id)

Esto coincide con la ruta dinámica definida previamente como /edit/:id. Si solo envías /edit, React Router responde con un Not Found [13:45].

¿Cómo reutilizar un mismo formulario para crear y editar?

Aquí entra una decisión clave de diseño: el TodoForm debería servir tanto para NewTodoPage como para EditTodoPage. Para lograrlo, el componente recibe propiedades dinámicas en lugar de tener textos y funciones fijas.

Las tres props que vuelven reutilizable al formulario son:

• label: el texto que se muestra arriba, como Escribe tu nuevo TODO o Edita tu TODO.
• submitText: el texto del botón principal, como Añadir o Editar.
• submitEvent: la función que se ejecuta al enviar el formulario, recibiendo el newTodoValue.

js <TodoForm label="Escribe tu nuevo TODO" submitText="Añadir" submitEvent={(newTodoValue) => { console.log('Llamar a addTodo'); }} />

En EditTodoPage se replica la misma estructura cambiando los textos y apuntando a una futura función editTodo. Mientras la lógica real de edición no está conectada, un console.log deja la tarea pendiente sin romper el flujo.

¿Qué es una prop dinámica en React? Es una propiedad cuyo valor se decide desde el componente padre. En vez de hardcodear Añadir dentro del botón, lo recibes como props.submitText y lo defines distinto en cada página.

¿Qué hacer con el botón cancelar dentro del formulario?

El botón de cancelar antes ejecutaba setOpenModal(false). Ahora debe regresar al home con navigate('/'). La lógica del onSubmit también se simplifica: deja de cerrar modales y solo invoca a props.submitEvent(newTodoValue), además de redirigir al home tras el envío.

Esta separación de responsabilidades hace que el formulario no sepa nada de modales ni de hooks de TODOs: solo sabe enviar datos cuando se le indica.

¿Cómo ajustar el CSS de un formulario que vivía en un modal?

El TodoForm original tenía estilos pensados para flotar sobre un fondo: background-color propio, width del 90% y max-width de 300 píxeles. Al moverlo a una página, esos estilos se sienten rotos.

Los ajustes mínimos son:

• Comentar el background-color para heredar el fondo de la página.
• Mantener el max-width para que no se estire en pantallas grandes.
• Agregar margin: 0 auto para centrar horizontalmente el formulario.

Si quieres centrarlo verticalmente también, agregas height al contenedor padre y un display: flex con align-items: center. Es opcional, depende del aire visual que busques.

¿Qué queda pendiente tras matar los modales?

Los componentes Modal y los antiguos portales pueden borrarse o conservarse por si algún día vuelven a hacer falta. La aplicación ya navega correctamente: el botón de crear lleva a /new, el lápiz de cada TODO lleva a /edit/:id y el formulario muestra textos distintos según la página.

Lo que falta es conectar la lógica real: una función addTodo que reciba newTodoValue desde NewTodoPage y una función editTodo que actualice un TODO existente en el custom hook useTodos. Ese paso convierte la navegación en una funcionalidad completa.

¿Ya migraste alguno de tus modales a rutas dedicadas? Cuéntame en los comentarios qué ventajas notaste en la experiencia de tus usuarios.