Clonar React Router desde cero

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

Clonar React Router desde cero

Resumen

Clonar React Router en React es el reto final para entender cómo funciona la navegación SPA por dentro. Vas a construir tus propios componentes HashRouter, Route y Link, además de custom hooks como useLocation y useNavigate, replicando la lógica de react-router-dom desde cero.

Este ejercicio cierra el ciclo de aprendizaje sobre enrutamiento en JavaScript: pasaste de un router vainilla basado en location.hash a una versión componetizada en React, lista para reusar en cualquier proyecto.

Qué significa clonar React Router en React

La idea es replicar el comportamiento de react-router-dom sin instalarlo. En el reto anterior ya construiste un router en JavaScript puro que escuchaba location.hash y renderizaba contenido distinto según la ruta. Ahora toca llevar esa misma lógica al mundo de los componentes.

¿Qué hace un HashRouter? Lee el valor de location.hash en la URL y decide qué componente renderizar. Cuando el hash cambia, el router actualiza la vista sin recargar la página.

No necesitas que el código quede perfecto en el primer intento. La consigna es clara: primero haz que funcione, después lo refactorizas.

Cómo construir HashRouter, Route y Link paso a paso

El reto principal se compone de tres piezas que trabajan juntas. Cada una tiene una responsabilidad concreta dentro del sistema de navegación.

Cómo crear tu propio componente HashRouter

El HashRouter es el contenedor que envuelve toda la app y mantiene el estado de la ruta actual. Su trabajo es escuchar los cambios en location.hash y notificar a los componentes hijos para que renderen lo que corresponde.

Puedes apoyarte en el Context API de React para compartir la ruta activa con cualquier componente anidado. Así, Route y Link podrán leer y modificar esa ruta sin pasar props manualmente.

Cómo funciona el componente Route con la propiedad path

El componente Route recibe una propiedad path y decide si renderiza o no su contenido. Si el path hace match con el hash actual, muestra el componente; si no, devuelve null.

¿Cómo decide Route qué renderizar? Compara su prop path con el hash actual de la URL. Si coinciden, renderiza el componente hijo; si no, no devuelve nada.

El nombre de la prop lo eliges tú. Puede ser path, route o lo que prefieras, siempre que mantengas consistencia.

Por qué necesitas un componente Link en lugar de una etiqueta a

Una etiqueta a normal dispara una nueva petición HTTP y rompe la experiencia SPA. El componente Link evita eso: usa JavaScript para cambiar la URL y, en consecuencia, la ruta renderizada, sin recargar el HTML.

Puedes usar la etiqueta que prefieras por dentro, lo importante es que el cambio de ruta ocurra en cliente. Esa es la diferencia clave entre navegación tradicional y navegación SPA.

Cómo replicar los custom hooks useLocation y useNavigate

Si quieres llevar el reto un paso más allá, clona también los custom hooks de react-router-dom. Estos hooks permiten interactuar con el router desde cualquier componente funcional sin pasar props.

useLocation: devuelve información sobre la ruta actual, como el hash o el pathname.
useNavigate: retorna una función que cambia la URL programáticamente desde JavaScript.
Otros hooks que quieras explorar, como los relacionados con parámetros o búsqueda.

La lógica detrás es la misma del HashRouter: leer y escribir sobre location.hash, y notificar los cambios al resto de la app mediante contexto o estado.

Qué aprenderás al terminar este reto de React

Más allá del código, este ejercicio te deja claridad sobre cómo funcionan las librerías que usas todos los días. Entender el motor interno de React Router cambia tu forma de leer documentación y de depurar bugs.

Manejo de location.hash como fuente de verdad para la ruta.
Composición de componentes con Context API para compartir estado global.
Diferencia entre navegación tradicional con etiqueta a y navegación SPA con un Link personalizado.
Creación de custom hooks que encapsulan lógica reutilizable.

Cuando termines, comparte tu versión en los comentarios. La idea es ver qué soluciones aparecen en la comunidad, comparar enfoques y mejorar iteración tras iteración hasta tener una versión sólida de React Router hecha por ti.

Harold Zurita Simon

Estudiante

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.

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

Resumen