Cómo migrar React portals a rutas reales

Cursos Empresas Blog Live Conf Precios

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

Cómo migrar React portals a rutas reales

Resumen

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.

Comentarios

Diana Florez

Estudiante

npm i -S react-router-dom@6

Felipe Morales Torres

Estudiante

Instrucciones que yo seguí:

Ir a la carpeta en donde trabajaremos el proyecto.
Ahí en terminal, clonar el repositorio, yo tuve que clonarlo sin la branch porque me daba error

git clone https://github.com/platzi/curso-react-router-proyecto2

Después, desde terminal, ir a la carpeta en donde está todo el proyecto:

cd curso¬-react-router-proyecto2

Después en VS Code, borrar los archivos package-lock.json y yarn.lock para que no nos de errores al instalar las dependencias
Instalar dependencias

npm i

Inicializar nuestro proyecto

npm start

Listo, debes tener tu proyecto corriendo, a programar, que esos programas no se van a hacer solos, get fun!

Juan Camilo Lentino Villalba

Estudiante

si al levantar el servidor sigue presentando errores podemos auditar el proyecto

npm audit fix --force

y debería dejar correrlo sin problemas

Israel Hernández Galicia

Estudiante

Despues de los retos anteriores :(((

Juan Pico

Estudiante

Para los que usan la versión de node 20 y les sale como 200 vulnerabilidades y falla el npm start, para no bajar la versión de nodejs es mejor ejecutar los siguientes comandos.

npm update

npm audit fix --force

Jose Ever Muñoz Muñoz

Estudiante

muchas gracias, estaba perdido sin ti

Orangel Brito

Estudiante

Repositorio para iniciar : https://github.com/platzi/curso-react-router-proyecto2/tree/inicio-curso-rr

Jvalencia

Estudiante

cuando lo descargue no funciono, me toco ejecutar "npm audit fix --force" y ya al volver a lanzar el proyecto funciono en mi equipo

Carlos Daza

Estudiante

Tenia el error: ERR_OSSL_EVP_UNSUPPORTED

Y se soluciona escribiendo en la consola, en la ruta donde tienes clonado el repositorio(Ejemplo: /Documentos/GitHub/Navegacion_con_React_Router/curso-react-estado-2): NODE_OPTIONS='--openssl-legacy-provider' npm run build

Gilbert Ardila

Estudiante

perdóname la pregunta, ¿al dar npm init me crea la carpeta node modules y el package.json?

Juan Castro

Profesor

npm init crea el package.json y npm install crea o actualiza los nod_modules. :D

Gilbert Ardila

Estudiante

ahh muchas gracias juan estaba buscando ese comando!!

Juan Camilo Lentino Villalba

Estudiante

npm i react-router-dom@6.3.0

David Rangel

Estudiante

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 };

Diego Andres Jimenez Quintero

Estudiante

Hola, si al ejecutar el comando npm start

siguen los problemas solo ejecuta esta linea en la terminal

npm audit fix --force

El comando npm audit fix --force se utiliza para corregir automáticamente las vulnerabilidades de seguridad detectadas en los paquetes que forman parte de un proyecto Node.js.

npm audit: Este comando escanea las dependencias de tu proyecto en busca de vulnerabilidades de seguridad conocidas.
npm audit fix: Intenta corregir automáticamente estas vulnerabilidades actualizando los paquetes involucrados, manteniendo en la medida de lo posible las versiones especificadas en el archivo package.json.
--force: Fuerza la actualización de los paquetes, incluso si eso implica hacer cambios importantes, como actualizaciones a versiones mayores (que pueden introducir cambios incompatibles o romper el funcionamiento de la aplicación).

Usar --force puede resolver algunas vulnerabilidades más severas, pero conlleva el riesgo de introducir errores o incompatibilidades, ya que puede actualizar las dependencias a versiones que no hayan sido probadas con el resto del código.

Es importante tener cuidado al usarlo y probar tu proyecto después de ejecutarlo para asegurarte de que todo sigue funcionando correctamente.

Harold Zurita Simon

Estudiante

Integrando React Router a proyectos en React

. Vamos a agarrar un proyecto que ya empezamos hace mucho tiempo y vamos a aplicarle rutas. El proyecto es TodoMachine y vamos a remplazar el portal de editar TODO con una nueva ruta /new. . Vamos a tener que hacer navegación entre rutas. Por ejemplo, el Cancelar nos debe devolver al Home, el Añadir también pero antes debe agregar el TODO y validar si todo está bien. . También vamos a implementar una ruta /edit/:id donde tendremos un formulario para editar los TODOs. Ruta a la cual accederemos por medio de un botón de editar. Será el mismo formulario con un texto diferente y en el text area tendremos el texto o tarea pendiente que teníamos antes para ese TODO en particular, el que tiene ese Id. . Anteriormente el Id de los TODOs era el texto; pero el texto cambia y entonces nos rompería muchas cosas, por lo que vamos a agregarle Ids. . Por medio de este identificador vamos a encontrar al TODO que queremos empezar a editar. A partir de esa información debemos poder ir al LocalStorage o nuestra fuente de información, hallar el TODO, tomar su texto y ponerlo por defecto en nuestro text area para que los usuarios no tengan que escribirlo desde cero para que editen el TODO desde la versión anterior. . Lo primero que vamos hacer es clonar el repositorio del proyecto y luego instalar las dependencias que necesitamos para correr nuestro proyecto con: .

npm install

. En caso de tener algún error es aconsejable eliminar el package-lock.json y el yarn-lock, luego vuelve a correr el npm install. . Corremos el proyecto con el comando npm start y nos dirigimos al localhost:3000. El único error que talvez puede tener la app se encuentra en el directorio App en el archivo index.js donde completeTodo no pertenece a state sino que a stateUpdaters. Por lo que solo lo movemos de lugar. .

...
function App() {
  const { state, stateUpdaters } = useTodos();

  const {
    error,
    loading,
    searchedTodos,
    totalTodos,
    completedTodos,
    openModal,
    searchValue,
  } = state;

  const {
    setOpenModal,
    addTodo,
    completeTodo,
    deleteTodo,
    setSearchValue,
    sincronizeTodos,
  } = stateUpdaters;
  
  ...
}
export default App;

. Finalmente, instalamos React Router DOM con el siguiente comando. .

npm i -S react-router-dom@6

Jonathan Stiven Colorado Largo

Estudiante

HOy siendo 4 de enero de 2024 si deseas no tener problemas con el código como en este mensaje

at SU_RUTA\curso-react-router-proyecto2\node_modules\babel-loader\lib\index.js:59:103 {

opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],

library: 'digital envelope routines',

reason: 'unsupported',

code: 'ERR_OSSL_EVP_UNSUPPORTED'

Ejecute

npm install package@latest --save

Wilson Dev

Estudiante

¿Por qué no están los recursos?

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