Migrar modales a rutas con useNavigate

Curso de React.js: Navegación con React Router

Contenido del curso

No sé dónde empezar

Fundamentos de navegación en la web

Introducción a React Router DOM 6

Fake authentication con React Router DOM 6

React Router en TODO Machine

Próximos pasos

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0017:36

Migrar modales a rutas con useNavigate

Curso de React.js: Navegación con React Router

Clase 22 de 30

Clase 22 / 30

Recursos

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.

Harold Zurita Simon

Hace 2 años

Cambiando modales por navegación

. Vamos a eliminar los modales y portales de la aplicación para utilizar rutas en su lugar. . En el componente HomePage comentamos todo lo relacionado a modales y portales, importamos useNavigate y guardamos su llamado en una constante navigate. . Al renderizar los todos en la render prop onEdit usamos la navegación para dirigirnos a /edit/:id donde id será el ID del TODO. . Finalmente, el botón de crear TODOs recibirá una función flecha que por medio de navegación nos dirige a /new. .

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

function HomePage() {
  const navigate = useNavigate();
  ...

  const {
    ...
    // openModal,
    ...
  } = state;

  const {
    // setOpenModal,
    // addTodo,
    ...
  } = stateUpdaters;
  
  return (
    ...
        {todo => (
          <TodoItem
            key={todo.id}
            text={todo.text}
            completed={todo.completed}
            onEdit={() => navigate('/edit/' + todo.id)}
            onComplete={() => completeTodo(todo.id)}
            onDelete={() => deleteTodo(todo.id)}
          />
        )}
    ...

      {/* {!!openModal && (
        <Modal>
          <TodoForm
            addTodo={addTodo}
            setOpenModal={setOpenModal}
          />
        </Modal>
      )} */}

      <CreateTodoButton
        onClick={() => navigate('/new')}
        // setOpenModal={setOpenModal}
      />

      ...
  );
}

export { HomePage };

. En el componente CreateTodoButton ya no necesitamos modales, por lo que solo le enviamos la función que pasamos por props a la propiedad onClick. .

import React from 'react';
import './CreateTodoButton.css';

function CreateTodoButton(props) {
  return (
    <button
      className="CreateTodoButton"
      onClick={props.onClick}
    >
      +
    </button>
  );
}

export { CreateTodoButton };

. En el componente TodoForm necesitamos que sea dinámico, tanto para editar, como para crear TODOs. . Lo que cambia es que ahora utilizamos navegación tanto para el botón de Cancelar como para el botón para realizar el Submit, vamos redirigir hacia /. Además nuestra función onSubmit va a utilizar una función que pasaremos por props submitEvent que será versátil para crear o editar TODOs según sea el caso. . Finalmente, tanto el label como el texto del botón de submit van a ser dinámicos y los pasaremos por props. .

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

function TodoForm(props) {
  const navigate = useNavigate();
  ...
  
  const onCancel = () => {
    navigate('/');
  };
  const onSubmit = (event) => {
    event.preventDefault();
    navigate('/');
    props.submitEvent(newTodoValue);
  };

  return (
    <form onSubmit={onSubmit}>
      <label>{props.label}</label>
      <textarea
        value={newTodoValue}
        onChange={onChange}
        placeholder="Cortar la cebolla oara el almuerzo"
      />
      <div className="TodoForm-buttonContainer">
        <button
          type="button"
          className="TodoForm-button TodoForm-button--cancel"
          onClick={onCancel}
          >
          Cancelar
        </button>
        <button
          type="submit"
          className="TodoForm-button TodoForm-button--add"
        >
          {props.submitText}
        </button>
      </div>
    </form>
  );
}

export { TodoForm };

. Desde el archivo TodoForm.css centramos el componente y le quitamos el color de fondo que tenía en la clase form. .

form {
  width: 90%;
  max-width: 300px;
  /* background-color: #fff; */
  margin: 0 auto;
  padding: 33px 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

. Por último, solo que modificar los componentes de EditTodoPage y NewTodoPage de la siguiente manera. .

import React from 'react';
import { TodoForm } from '../../ui/TodoForm';

function EditTodoPage() {
  return (
    <TodoForm
      label="Edita tu TODO"
      submitText="Editar"
      submitEvent={() => console.log('Llamar a editTodo')}
    />
  );
}

export { EditTodoPage };

import React from 'react';
import { TodoForm } from '../../ui/TodoForm';

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

export { NewTodoPage };

Comentarios (15)15 comentarios

Luis Felipe Silgado Cortázar

Hace 4 años

Juan Carlos Montilla Sánchez

Santiago Lopera Naranjo

Jose Ever Muñoz Muñoz

Diego Reyes Cabrera

milton coronado

Hace 3 años

Sebastian Carballo

Geovanni Labastida Vázquez

Ulqernesh Karvenae

Lorenzo Peñalver

Max Andy Diaz Neyra

Jvalencia

Omar Díaz Hernández

Armando Rivera

marlon mosquera rivera

Platzi

Jorge Sevilla

Juan Castro

Profesor

Andres Prieto

Luis Jorge López Hernández

Fundamentos de navegación en la web

Cuándo y por qué usar React Router

SSR vs SPA: cómo funciona cada una

Uso de React Router DOM 6 en Proyectos React

Introducción a React Router DOM 6

Instalar React Router Dom 6 paso a paso

Browser Router vs Hash Router en GitHub Pages

Primeras rutas con React Router Dom 6

Link y NavLink para navegación en React

Rutas dinámicas con React Router DOM y useParams

useNavigate para navegar con JavaScript

Outlet y rutas anidadas en React Router

Fake authentication con React Router DOM 6

Rutas privadas con fake auth en React

Rutas privadas y públicas en React

Rutas protegidas con Navigate en React

Roles y permisos en aplicaciones web: Autenticación y autorización

Retos avanzados en React: manejo de estado y composición de componentes

Redirect al login con useLocation en React

Rutas dinámicas con roles de usuario

React Router en TODO Machine

Cómo migrar React portals a rutas reales

Estructura de carpetas con React Router Dom 6

Botón de editar todos con React y SVG

Generación de IDs únicos para gestionar tareas en React

Migrar modales a rutas con useNavigate

Cómo funciona editTodo con useParams

Texto por defecto en textarea con useLocation

Implementación de React Router en Proyectos Legacy

Próximos pasos

Sincronizar el buscador con la URL

Migrando a React Router Dom 5 en proyectos reales

Migra Platzi Movies de JS a React

Clonar React Router desde cero

Navegación Avanzada con React Router DOM 6

Migrar modales a rutas con useNavigate