Clonación de React Router en Componentes React

Clase 29 de 30 • Curso de React.js: Navegación con React Router

Contenido del curso

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

Resumen

¿Cuál es el reto máximo de este curso?

En este fascinante y desafiante curso de Platzi, se te invita a sumergirte completamente en el mundo de React desarrollando tus propias versiones de funcionalidades esenciales que ofrece React Router. Este no es un ejercicio cualquiera; es un reto que te llevará un paso más allá en tu camino para convertirte en un desarrollador profesional efectivo.

¿Cómo se clona un router en React?

La tarea inicial de este reto consiste en replicar lo que ya has aprendido sobre la creación de un router en JavaScript vainilla. Ahora, te toca llevar esa experiencia al entorno de React y crear un hash router. Este proceso implica transformar los elementos mágicos de un router manual en componentes de React con las siguientes indicaciones:

Crea un hash router: A partir de los conocimientos previos, construye un componente de 'hash router' en React que use location.hash para renderizar el componente correspondiente.
Desarrolla un componente Route: Implementa un componente Route que se encargue de verificar si el hash actual coincide con el path o propiedad que determines, y renderice los componentes correspondientes.
Implementa un componente Link: Crea un componente Link que permita realizar la navegación utilizando JavaScript, en lugar de una etiqueta a convencional, asegurando que la URL actualice adecuadamente sin tener que recargar la página.

¿Cómo replicar los hooks de React Router DOM?

Si hay quienes buscan llevar su aprendizaje al siguiente nivel, eres invitado a replicar los hooks personalizados como useLocation, useNavigate o cualquier otro que creas necesario. Estos permitían ejecutar funciones desde JavaScript, cambiando tanto la URL como el contenido de la aplicación. Esto, aunque suene complejo, es un excelente ejercicio para mejorar tus habilidades en JavaScript y React.

Consejos para llevar a cabo este reto

No te preocupes por la estética inicial del código: Tu prioridad debe ser que funcione, sin importar que el código no sea bonito al principio. Gradualmente podrás refactorizarlo para mejorar su estructura.
Aprovecha la comunidad React: No estás solo en este proyecto, puedes buscar apoyo y compartir experiencias con otros estudiantes. Aprende de sus implementaciones y busca inspiración en otras librerías y proyectos open source.
Itera y mejora constantemente: El desarrollo se trata de iterar. Prueba, falla, mejora y comparte tus aprendizajes. Cada nueva versión que desarrolles te acercará más a la maestría en React, especialmente en cuanto a la gestión de rutas.

Te animamos a que te lances a este reto con confianza y entusiasmo. Al completar esta actividad, no solo habrás profundizado en tus habilidades técnicas, sino que además te sentirás más satisfecho y seguro de tu capacidad para enfrentar y superar desafíos en programación. ¡Buena suerte, y sigue avanzando en tu ruta de aprendizaje con determinación!

Harold Zurita Simon

student•

Solución

Les comparto mi solución al reto donde logramos clonar parte de lo que es React Router DOM 6.

GitHub:

Deploy:

Lo primero que vemos al ingresar a la aplicación es la página Home desde el cual hacemos algunos testeos utilizando un HashRouter.

Por ejemplo, podemos navegar hacia la página About por medio de un componente custom Link de la siguiente manera:

Navegación simple.

Navegación con estado.

Navegación con search, donde además podemos cambiar el valor del search por medio de un botón que utiliza un custom useSearchParams para lograrlo.

Navegación con search y estado, donde el estado persiste aún si cambiamos el valor del search.

Podemos navegar también a través de uno botones que utilizan un custom useNavigate y redireccionan de la misma manera que el custom Link.

Finalmente, podemos navegar hacia rutas dinámicas y obtener estos parámetros por medio de un custom useParams.

Para el test, hemos probado lo siguiente:

Navegación simple hacia la página de Profile del usuario #73 con un botón que utiliza un custom useNavigate.

Navegación con search y estado hacia la página de Profile del usuario #73 con un botón que utiliza un custom useNavigate.

Esas fueron las pruebas suficientes como para saber que el clon de React Router DOM 6 funciona correctamente. Además de redireccionarnos a una página de Not Found en caso de no coincidir ninguna ruta.

App.js

import React from "react";
import { HashRouter } from "./components/HashRouter";
import { Route } from "./components/Route";
import { Routes } from "./components/Routes";
import { Home } from "./pages/Home";
import { About } from "./pages/About";
import { NotFound } from "./pages/NotFound";
import { UserProfile } from "./pages/UserProfile";

function App() {
  return (
    <HashRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/user/:id" element={<UserProfile />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </HashRouter>
  );
}

export default App;

Este componente principal usa HashRouter para manejar la navegación basada en hash. Dentro de HashRouter, las rutas son definidas usando Routes y Route, donde cada ruta especifica un camino path y el componente a renderizar element. Esto incluye rutas estándar, rutas dinámicas con parámetros como /user/:id, y una ruta comodín * para manejar páginas no encontradas.

HashRouter.js

import { createContext, useEffect } from "react";
import { useLocation } from "../hooks/useLocation";

const RouterContext = createContext();

const HashRouter = ({ children }) => {
  const location = useLocation();

  useEffect(() => {
    if (!window.location.hash) {
      window.history.replaceState(null, "", "#/");
      window.dispatchEvent(new HashChangeEvent("hashchange"));
    }
  }, []);

  return (
    <RouterContext.Provider value={{ location }}>
      {children}
    </RouterContext.Provider>
  );
};

export { RouterContext, HashRouter };

Este componente proporciona el contexto de enrutamiento RouterContext a toda la aplicación. Utiliza el custom hook useLocation para rastrear la ubicación actual en la URL hash. Si la URL no tiene un hash al cargar la página, se agrega automáticamente #/ para mantener la estructura del enrutamiento.

Link.js

import React from "react";

function Link({ to, children, state = null }) {

  const handleClick = (e) => {
    e.preventDefault();
    window.history.pushState(state, "", `#${to}`);
    window.dispatchEvent(new HashChangeEvent("hashchange"));
  };

  return (
    <span onClick={handleClick} style={{ cursor: "pointer" }}>
      {children}
    </span>
  );
}

export { Link };

Este componente es una versión personalizada de un enlace <a>, que permite la navegación interna en la aplicación sin recargar la página. Usa window.history.pushState para actualizar la URL y despacha un evento hashchange para notificar a la aplicación sobre la nueva ubicación.

Route.js

const Route = ({ path, element }) => {
  return { path, element };
};

export { Route };

Simplemente devuelve un objeto con la ruta y el elemento asociado, siendo más un contenedor de datos que un componente funcional.

Routes.js

import React, { useContext } from "react";
import { RouterContext } from "./HashRouter";

const matchPath = (path, pathname) => {
  const paramNames = [];
  const regexPath = path
    .replace(/\/:([^/]+)/g, (full, key) => {
      paramNames.push(key);
      return "/([^/]+)";
    })
    .replace(/\*/g, "(.*)");

  const match = pathname.match(new RegExp(`^${regexPath}$`));
  if (!match) return null;

  const params = match.slice(1).reduce((acc, value, index) => {
    acc[paramNames[index]] = value;
    return acc;
  }, {});

  return { params };
};

const Routes = ({ children }) => {
  const { location } = useContext(RouterContext);

  const matchedRoute = React.Children.toArray(children).find((child) => {
    const { path } = child.props;

    if (path === "*") return true;

    const match = matchPath(path, location.pathname);
    return match !== null;
  });

  const match = matchedRoute
    ? matchPath(matchedRoute.props.path, location.pathname)
    : null;

  return (
    <RouterContext.Provider value={{ location, matchedRoute }}>
      {matchedRoute
        ? React.cloneElement(matchedRoute.props.element, { ...match?.params })
        : null}
    </RouterContext.Provider>
  );
};

export { Routes };

Este componente selecciona y renderiza el componente adecuado según la URL actual. Usa matchPath para verificar si la ubicación actual coincide con alguna ruta definida. Si se encuentra una coincidencia, se renderiza el componente correspondiente, pasando los parámetros extraídos de la URL.

useLocation.js

import { useState, useEffect } from "react";

const getLocationProps = (location) => {
  const { href } = location;
  const hashIndex = href.indexOf("#");

  const mainPathname = hashIndex !== -1 ? href.slice(hashIndex + 1) : "";

  const otherHashIndex = mainPathname.indexOf("#");
  const hash = otherHashIndex !== -1 ? mainPathname.slice(otherHashIndex) : "";

  const searchIndex = mainPathname.indexOf("?");
  const search = searchIndex !== -1 ? mainPathname.slice(searchIndex) : "";

  const pathname = mainPathname.split("?")[0].split("#")[0];

  const state = window.history.state;

  return { hash, pathname, search, state };
};

function useLocation() {
  const [location, setLocation] = useState(getLocationProps(window.location));

  useEffect(() => {
    const handleLocationChange = () => {
      setLocation(getLocationProps(window.location));
    };

    window.addEventListener("popstate", handleLocationChange);
    window.addEventListener("hashchange", handleLocationChange);

    return () => {
      window.removeEventListener("popstate", handleLocationChange);
      window.removeEventListener("hashchange", handleLocationChange);
    };
  }, []);

  return location;
}

export { useLocation };

Este hook personalizado rastrea la ubicación actual de la URL, detectando cambios en el hash y en la historia de navegación popstate. Devuelve un objeto con detalles sobre el hash, la ruta pathname, los parámetros de búsqueda search, y el estado state.

useNavigate.js

function useNavigate() {
  function navigate(to, state = null) {
    window.history.pushState(state, "", `#${to}`);
    window.dispatchEvent(new HashChangeEvent("hashchange"));
  }

  return navigate;
}

export { useNavigate };

Este hook personalizado permite navegar a diferentes rutas actualizando la URL hash sin recargar la página. La función navigate cambia la URL y despacha un evento hashchange para que otros componentes respondan al cambio de ruta.

useParams.js

import { useContext } from "react";
import { RouterContext } from "../components/HashRouter";

function useParams() {
  const { location, matchedRoute } = useContext(RouterContext);
  const { pathname } = location;

  const extractParams = (path, pathname) => {
    const paramNames = [];
    const regexPath = path
      .replace(/([.*+?^${}()|[\]\\])/g, "\\$1")
      .replace(/:(\w+)/g, (match, paramName) => {
        paramNames.push(paramName);
        return "([^/]+)";
      });

    const regex = new RegExp(`^${regexPath}$`);
    const match = pathname.match(regex);

    if (match) {
      const params = {};
      paramNames.forEach((name, index) => {
        params[name] = match[index + 1];
      });
      return params;
    }

    return null;
  };

  const path = matchedRoute?.props.path || pathname;
  const params = extractParams(path, pathname);

  return params;
}

export { useParams };

Este hook extrae los parámetros dinámicos de la ruta actual, como :id en /user/:id. Utiliza la ruta actual pathname y la ruta coincidente matchedRoute para construir un objeto con los parámetros que se pasaron en la URL.

useSearchParams.js

import { useContext } from "react";
import { RouterContext } from "../components/HashRouter";

function useSearchParams() {
  const { location } = useContext(RouterContext);

  const getSearchParams = () => {
    return new URLSearchParams(location.search);
  };

  const setSearchParams = (newParams) => {
    const searchParams = new URLSearchParams(location.search);

    Object.keys(newParams).forEach((key) => {
      if (newParams[key] === null) {
        searchParams.delete(key);
      } else {
        searchParams.set(key, newParams[key]);
      }
    });

    const newLocation = `${location.pathname}?${searchParams.toString()}`;
    const state = location.state || null;
    window.history.pushState(state, "", `#${newLocation}`);
    window.dispatchEvent(new HashChangeEvent("hashchange"));
  };

  return [getSearchParams(), setSearchParams];
}

export { useSearchParams };

Este hook permite obtener y modificar los parámetros de búsqueda en la URL hash. Proporciona una función para acceder a los parámetros actuales getSearchParams y otra para actualizarlos setSearchParams, lo que desencadena un cambio de URL y un evento hashchange.

About.js

import React from "react";
import { useLocation } from "../hooks/useLocation";
import { useSearchParams } from "../hooks/useSearchParams";

function About() {
  const location = useLocation();
  const { state } = location;
  console.log(location);

  const [searchParams, setSearchParams] = useSearchParams();
  const query = searchParams.get("query");

  const handleSearch = () => {
    setSearchParams({ query: "harold-query" });
  };

  return (
    <>
      <h2>About</h2>
      {state && (
        <section>
          <h3>State section</h3>
          {Object.keys(state).map((key) => (
            <p>
              <b>{key}: </b>
              {state[key]}
            </p>
          ))}
        </section>
      )}
      {query && (
        <section>
          <h3>Search side</h3>
          <p>Search Query: {query}</p>
          <button onClick={handleSearch}>Search New Query</button>
        </section>
      )}
    </>
  );
}

export { About };

Este componente muestra información sobre la página de About, incluyendo el estado almacenado en la historia de navegación state y los parámetros de búsqueda searchParams. Incluye un botón para modificar el parámetro de búsqueda y actualizar la URL hash.

Home.js

import React from "react";
import { Link } from "../components/Link";
import { useLocation } from "../hooks/useLocation";
import { useNavigate } from "../hooks/useNavigate";

function Home() {
  const location = useLocation();
  console.log(location);

  const navigate = useNavigate();

  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        width: "300px",
        gap: "8px",
      }}
    >
      <h2>Home</h2>
      <Link to="/about">
        <div style={{ color: "red" }}>To About with Link component</div>
      </Link>
      <Link to="/about" state={{ link: "link value" }}>
        <div style={{ color: "purple" }}>
          To About with Link component & state
        </div>
      </Link>
      <Link to="/about?query=new">
        <div style={{ color: "green" }}>To About with Link & search</div>
      </Link>
      <Link to="/about?query=new" state={{ link: "link value" }}>
        <div style={{ color: "blue" }}>To About with Link, search & state</div>
      </Link>
      <button onClick={() => navigate("/about")}>
        To about with useNavigate
      </button>
      <button onClick={() => navigate("/about?query=new")}>
        To about with useNavigate & search
      </button>
      <button
        onClick={() => navigate("/about", { navigate: "navigate value" })}
      >
        To about with useNavigate & state
      </button>
      <button
        onClick={() =>
          navigate("/about?query=new", { navigate: "navigate value" })
        }
      >
        To about with useNavigate, search & state
      </button>
      <button
        style={{ backgroundColor: "orange", color: "white" }}
        onClick={() => navigate("/user/73")}
      >
        To user #73 profile
      </button>
      <button
        style={{ backgroundColor: "orange", color: "white" }}
        onClick={() => navigate("/user/73?query=new", { user: "user data" })}
      >
        To user #73 profile with search & state
      </button>
    </div>
  );
}

export { Home };

Este componente muestra la página de Home ofrece múltiples opciones de navegación usando Link y useNavigate, cada uno con diferentes combinaciones de parámetros de búsqueda y estado. Esto demuestra cómo se pueden manejar diferentes tipos de navegación dentro de la aplicación.

NotFound.js

import React from "react";

function NotFound() {
  return <div>NotFound</div>;
}

export { NotFound };

Este componente simple se renderiza cuando no se encuentra ninguna ruta coincidente, mostrando un mensaje NotFound.

UserProfile.js

import React from "react";
import { useParams } from "../hooks/useParams";
import { useLocation } from "../hooks/useLocation";
import { useSearchParams } from "../hooks/useSearchParams";

function UserProfile() {
  const location = useLocation();
  const { state } = location;
  console.log(location);
  const params = useParams();

  const [searchParams, setSearchParams] = useSearchParams();
  const query = searchParams.get("query");

  const handleSearch = () => {
    setSearchParams({ query: "harold-query" });
  };

  return (
    <>
      <h2>User Profile</h2>
      <p>User ID: {params.id}</p>

      {state && (
        <section>
          <h3>State section</h3>
          {Object.keys(state).map((key) => (
            <p>
              <b>{key}: </b>
              {state[key]}
            </p>
          ))}
        </section>
      )}
      {query && (
        <section>
          <h3>Search side</h3>
          <p>Search Query: {query}</p>
          <button onClick={handleSearch}>Search New Query</button>
        </section>
      )}
    </>
  );
}

export { UserProfile };

Este componente muestra el perfil de un usuario específico, identificando al usuario a través del parámetro de ruta :id. También maneja el estado y los parámetros de búsqueda, permitiendo que el componente muestre información adicional según la URL actual.

Clonación de React Router en Componentes React

Fundamentos de navegación en la web

Navegación Web con React Router: Fundamentos y Prácticas Avanzadas

Server-side Rendering vs Single Page Applications: Ventajas y Desventajas

Uso de React Router DOM 6 en Proyectos React

Introducción a React Router DOM 6

Instalación de React Router DOM 6 en un proyecto React

Uso de Hash Router en Aplicaciones Web con React Router DOM

Creación de Rutas Dinámicas con React Router DOM 6

Navegación en React Router: Uso de Link y NavLink

Rutas dinámicas con React Router DOM y useParams

Uso de useNavigate en React Router DOM para navegación dinámica

Uso de Outlet y Nested Routes en React Router DOM 6

Fake authentication con React Router DOM 6

Autenticación y Autorización en Apps con React Router y Hooks

Control de Acceso en Menú con Autenticación React

Protección de Rutas con React Router y Hooks

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

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

Mejorando la Redirección Post-Login en Aplicaciones Web

Roles y Permisos Avanzados en React Router v6

React Router en TODO Machine

Migración de Todo Machine a React Router 6

Organización de carpetas y rutas en React con React Router DOM 6

Maquetación de Botón Editar en Lista de Tareas con React

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

Migración de modales a rutas en React: implementación práctica

Editar ToDos en React con Custom Hook y URL Parameters

Mejora de la Experiencia del Usuario al Editar To Do's en React

Implementación de React Router en Proyectos Legacy

Próximos pasos

Filtrado de Búsquedas en URL con React Router

Migración de React Router: de la versión 6 a la 5 en proyectos empresariales

Clonación de Platzi Movies usando React y React Router

Clonación de React Router en Componentes React

Navegación Avanzada con React Router DOM 6