Cómo migrar React portals a rutas reales

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:0011:33

Cómo migrar React portals a rutas reales

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

Clase 18 de 30

Clase 18 / 30

Recursos

Migrar un proyecto existente a React Router es una de las tareas más comunes cuando entras a trabajar en una empresa, agencia o startup. Aquí aprenderás a tomar Todo Machine, un proyecto heredado, e integrarle rutas dinámicas para reemplazar portales y modales por navegación real.

¿Por qué migrar un proyecto existente en lugar de empezar desde cero?

En la mayoría de los trabajos no vas a planear la arquitectura desde cero. Vas a recibir un código que alguien más escribió, con decisiones que quizá no compartes, y tu tarea será adaptarlo para implementar nuevas features o resolver bugs dentro de un sprint.

Ese es exactamente el ejercicio: tomar Todo Machine, fingir que no lo conocías y aplicarle rutas. Así entrenas el músculo más útil para tu carrera real como desarrollador.

¿Qué es un proyecto heredado? Es un proyecto que ya empezó hace tiempo y al que te sumas sin haber participado en su arquitectura inicial. Tu reto es adaptarte a las herramientas y estructura que ya existen [00:24].

¿Qué es Todo Machine y qué rutas vamos a crear?

Todo Machine es una aplicación de tareas con contador, buscador, lista de todos y un modal para agregar nuevas tareas. Ese modal se abre como un portal hacia otro nodo HTML, y eso es justo lo que vamos a eliminar [01:32].

La nueva estructura de navegación queda así:

/ o /home: la página principal con TodoCounter, TodoSearch y la lista de todos.
/new: una ruta dedicada al formulario para crear una nueva tarea, reemplazando al modal.
/edit/:id: una ruta dinámica que carga el formulario con el texto del todo seleccionado.

Esto implica que la interactividad ya no depende solo de prender o apagar estados, sino de navegación real entre rutas. Cancelar te devuelve al home, añadir valida y también te devuelve al home tras crear el todo.

¿Por qué los todos necesitan un ID único?

En los cursos anteriores se decidió identificar cada todo por su texto, bajo la lógica de que dos tareas no deberían repetirse. Pero al introducir la edición, el texto cambia, y eso rompe bases de datos, historial de navegación y rutas [04:32].

La solución es asignar un ID único a cada todo. Ese ID viaja en la URL como parámetro dinámico, y con useParams puedes leerlo dentro del componente para buscar en local storage el todo correspondiente y precargarlo en el textarea.

¿Para qué sirve useParams en React Router? Es un hook que te permite leer los parámetros dinámicos de una URL. Si tu ruta es /edit/:id, useParams te devuelve ese id para que lo uses dentro del componente.

¿Cómo descargar el proyecto e instalar React Router DOM v6?

El código vive en el repositorio curso-react-router-proyecto2, organizado en ramas, una por cada clase del curso. Empieza con la rama Inicio curso RR [05:50].

Los pasos para arrancar son:

Clonar el repositorio con git clone en la carpeta de tu preferencia.
Abrir el proyecto en tu editor de código.
Ejecutar npm install para instalar dependencias.
Correr npm start para levantar el servidor en localhost:3000.

Si npm install falla, elimina la carpeta node_modules, el archivo package-lock.json y el yarn.lock, y vuelve a intentarlo. Si el problema persiste, deja tu duda en los comentarios marcada como pregunta.

¿Cómo se instala React Router DOM v6?

El comando es directo:

bash npm install -S react-router-dom@6

El flag -S equivale a --save, y especificar la versión 6 evita sorpresas si en el futuro salen versiones nuevas con APIs distintas [09:55].

¿Qué error común aparece con completeTodo y cómo se resuelve?

Al correr el proyecto, puede aparecer el error complete Todo is not a function. La causa está en el custom hook useTodos, donde la función completeTodo quedó dentro del objeto state cuando debería estar en stateUpdaters, porque es un actualizador de estado, no un estado [07:56].

Mover esa función al objeto correcto restaura el funcionamiento. Una vez resuelto, puedes completar todos, filtrar con el buscador y verificar que local storage persiste tu información al recargar.

¿Qué componentes vas a eliminar al migrar a rutas?

La lógica del modal y los React portals desaparece por completo. Todo lo que en el código actual diga modal o React portal se elimina, porque su función se reemplaza con navegación entre rutas [09:25].

El resto de la arquitectura se conserva: la composición de TodoHeader, TodoCounter, TodoSearch, TodoList y TodoItem sigue intacta, junto con los custom hooks useTodos y useLocalStorage que centralizan la lógica.

Antes de pasar a la siguiente clase, revisa cada componente del proyecto. Identifica dónde se usa el modal, dónde se renderiza el formulario y cómo fluyen las props. Cuéntame en los comentarios qué parte del proyecto te parece más retadora de migrar.

David Rangel

Hace 7 meses

Esto fue lo que hice para poder mostrar la información de los usuarios existentes pero sólo puedes editar si estás loggeado y es tu perfil o si estás loggeado y eres admin:

// Profile.tsx
import { useEffect, useState } from 'react';
import { useSearchParams } from 'react-router';

import { UserRole, fullUserList } from '../constants/user.constants';
import { useAuth } from '../utils/auth';
import { EditOptions, type UserType, type EditType } from '../types/userTypes';

export const Profile = () => {
  const [searchParams] = useSearchParams();
  const [currentUserData, setCurrentUserData] = useState<
    UserType | null | undefined
  >(null);
  const [newUserData, setNewUserData] = useState<UserType | null | undefined>(
    null,
  );
  const [editState, setEditState] = useState<EditType>(EditOptions.EDIT);
  const [canUserEdit, setCanUserEdit] = useState<boolean>(false);
  const auth = useAuth();

  const userIdFromUri = searchParams.get('id');
  const userDataFromUriAccess = userIdFromUri
    ? fullUserList.find(
        (user) => user.id?.toLowerCase() === userIdFromUri.toLowerCase(),
      )
    : null;

  useEffect(() => {
    setCurrentUserData(userDataFromUriAccess ?? auth?.user);
  }, [setCurrentUserData, userDataFromUriAccess, auth?.user]);

  const isAdmin: boolean = auth?.user?.role === UserRole.ADMIN;
  const isCurrentAuthor: boolean = !!auth?.user?.id;
  const canProfileEdit: boolean = isAdmin || isCurrentAuthor;
  const hasAdminEditCredentials: boolean = isAdmin && canUserEdit;

  const handleOnClick = () => {
    if (editState === EditOptions.EDIT) {
      setEditState(EditOptions.SAVE);
      setCanUserEdit(true);
    } else {
      setCurrentUserData((prev) => ({
        ...prev,
        id: newUserData?.id ?? prev?.id,
        name: newUserData?.name ?? prev?.name,
        role: newUserData?.role ?? prev?.role,
        profession: newUserData?.profession ?? prev?.profession,
        city: newUserData?.city ?? prev?.city,
        country: newUserData?.country ?? prev?.country,
        courses: newUserData?.courses ?? prev?.courses,
      }));
      setCanUserEdit(false);
      setEditState(EditOptions.EDIT);
    }
  };

  return (
    <>
      <h1> Perfil de {auth?.user?.name} </h1>
      <p> Bienvenida </p>

      <h1> Información del Usuario </h1>
      <h5> ID </h5>
      <p>{currentUserData?.id}</p>
      <h5> Nombre </h5>
      {canUserEdit ? (
        <input
          placeholder='name'
          value={newUserData?.name}
          onChange={(e) =>
            setNewUserData((prev) => ({ ...prev, name: e.target.value }))
          }
        />
      ) : (
        <p>{currentUserData?.name}</p>
      )}
      <h5> Rol </h5>
      {hasAdminEditCredentials ? (
        <input
          placeholder='role'
          value={newUserData?.role}
          onChange={(e) =>
            setNewUserData((prev) => ({ ...prev, role: e.target.value }))
          }
        />
      ) : (
        <p>{currentUserData?.role}</p>
      )}
      <h5> Profesión </h5>
      {canUserEdit ? (
        <input
          placeholder='profession'
          value={newUserData?.profession}
          onChange={(e) =>
            setNewUserData((prev) => ({ ...prev, profession: e.target.value }))
          }
        />
      ) : (
        <p>{currentUserData?.profession}</p>
      )}
      <h5> Ciudad </h5>
      {canUserEdit ? (
        <input
          placeholder='city'
          value={newUserData?.city}
          onChange={(e) =>
            setNewUserData((prev) => ({ ...prev, city: e.target.value }))
          }
        />
      ) : (
        <p>{currentUserData?.city}</p>
      )}
      <h5> País </h5>
      {canUserEdit ? (
        <input
          placeholder='country'
          value={newUserData?.country}
          onChange={(e) =>
            setNewUserData((prev) => ({ ...prev, country: e.target.value }))
          }
        />
      ) : (
        <p>{currentUserData?.country}</p>
      )}
      <h5> # Cursos Tomados </h5>
      {hasAdminEditCredentials ? (
        <input
          placeholder='courses'
          value={newUserData?.courses}
          onChange={(e) =>
            setNewUserData((prev) => ({ ...prev, courses: e.target.value }))
          }
        />
      ) : (
        <p>{currentUserData?.courses}</p>
      )}
      {canProfileEdit && <button onClick={handleOnClick}>{editState}</button>}
    </>
  );
};

//auth.tsx

import {
  createContext,
  useContext,
  useState,
  useMemo,
  type ReactNode,
} from 'react';
import {
  Navigate,
  useLocation,
  useNavigate,
  useSearchParams,
} from 'react-router';

import { fullUserList } from '../constants/user.constants';
import { Paths, type UserType } from '../types/userTypes';

interface UserContextType {
  user: UserType | null;
  login: (name: string) => void;
  logout: () => void;
}

const AuthContext = createContext<UserContextType | undefined>(undefined);

const AuthProvider = ({ children }: { children: ReactNode }) => {
  const [searchParams] = useSearchParams();
  const navigate = useNavigate();
  const [user, setUser] = useState<UserType | null>(null);

  const wasRedirected: boolean = searchParams.get('redirected') === 'true';

  const login = (name: string) => {
    const foundCurrentUser = fullUserList.find(
      (user) => user.name.toLowerCase() === name.toLowerCase(),
    );

    if (foundCurrentUser?.name) {
      setUser(foundCurrentUser);
    } else {
      setUser({ name });
    }

    if (wasRedirected) navigate(-1);
    if (!wasRedirected) navigate('profile');
  };

  const logout = () => {
    setUser(null);
    navigate('/');
  };

  const auth = useMemo(() => ({ user, login, logout }), [user, login, logout]);

  return <AuthContext.Provider value={auth}>{children}</AuthContext.Provider>;
};

const useAuth = () => {
  const auth = useContext(AuthContext);

  return auth;
};

const ProtectedRoute = ({ children }: { children: ReactNode }) => {
  const location = useLocation();
  const [searchParams] = useSearchParams();
  const auth = useAuth();

  const currentPath = location.pathname;
  const userIdFromUri = searchParams.get('id');

  const isValidUserId = !!fullUserList.find(
    (user) => user.id?.toLowerCase() === userIdFromUri?.toLowerCase(),
  );

  if (currentPath === `/${Paths.PROFILE}` && isValidUserId)
    return <>{children}</>;

  if (!auth?.user && !(currentPath === Paths.PROFILE && userIdFromUri)) {
    return <Navigate to='/login' />;
  }

  return <>{children}</>;
};

const PublicOnlyRoute = ({ children }: { children: ReactNode }) => {
  const auth = useAuth();

  if (auth?.user) {
    return <Navigate to='/profile' />;
  }

  return <>{children}</>;
};

export { AuthProvider, useAuth, ProtectedRoute, PublicOnlyRoute };

Comentarios (14)14 comentarios

Diana Florez

Hace 4 años

Felipe Morales Torres

Juan Camilo Lentino Villalba

Israel Hernández Galicia

Hace 3 años

Juan Pico

Jose Ever Muñoz Muñoz

Hace 2 años

Orangel Brito

Jvalencia

Carlos Daza

Gilbert Ardila

Juan Castro

Profesor

Diego Andres Jimenez Quintero

Harold Zurita Simon

Jonathan Stiven Colorado Largo

Wilson Dev

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

Cómo migrar React portals a rutas reales