Reto: construye tu propio React Router

Reto45 min100 XP

Entendiste React Router desde afuera; hoy lo entiendes desde ADENTRO construyendo tu propio router en miniatura: un Context que guarda la URL actual, un <Link> que navega sin recargar, un emparejador de rutas con parámetros (/gastos/:id) —todo corriendo en vivo con la History API—. Es el mismo enfoque "desde cero" con el que hiciste tu useQuery, tu Zustand y tu máquina de estados. Cuando termines, el routing no será magia: será pushState, un Context y un poco de comparación de strings.

Reto

Tu propio router

Difícil45 min100 XP(×2 sin mirar la solución)

Qué debes construir

Un mini React Router funcional con estas piezas:

Un RouterProvider: guarda la ruta actual en estado, escucha popstate (botón atrás), y ofrece una función navegar(to) que usa pushState.
Un <Link to="...">: renderiza un <a> que al hacer clic navega SIN recargar (con preventDefault).
Un emparejador de rutas: una función que compare un patrón (/gastos/:id) con la ruta actual y extraiga los parámetros ({ id: "5" }) o devuelva null si no coincide.
Un <Rutas>: recorre una lista de rutas, encuentra la que coincide con la URL y renderiza su elemento (pasándole los parámetros), o un 404 si ninguna coincide.
Demo: rutas /, /gastos y /gastos/:id navegables con <Link>.

Reglas

Usa la History API (pushState + popstate), como el mini-router de la lección 1.
El emparejador debe soportar segmentos dinámicos (:id) y devolver los parámetros.
Todo tipado con TypeScript.

45:00

Cuando estés listo, arranca el reloj.

Lo que este reto te enseña sobre React Router:

El router es un Context con la URL. Toda la "magia" es un valor compartido (la ruta actual) que los componentes leen, más pushState para cambiarlo sin recargar. <Link>, useParams, useNavigate son solo formas de leer o escribir ese Context.
Emparejar rutas es comparar segmentos. El :id no es más que "este segmento es un comodín, guárdalo como parámetro". React Router hace esto con reglas de precedencia más finas, pero la idea es la que construiste.
popstate cierra el círculo. Escuchar el botón atrás es lo que hace que tu router se sienta nativo —sin eso, el historial del navegador se desincronizaría de tu UI—.

Autoevaluación: navega Inicio → Gastos → un gasto concreto → volver. ¿La URL cambia sin recargar? ¿el detalle recibe bien el id del parámetro? Compara con React Router: tu RouterProvider es <BrowserRouter>, tu <Link> es <Link>, tu emparejar es su lógica de matching, tu <Rutas> es <Routes>, y p.id es useParams().id. Le faltan rutas anidadas con <Outlet>, loaders, precedencia fina y muchísimos casos borde —pero el CORAZÓN del routing es esto: un Context con la URL, pushState para cambiarla, y comparar segmentos para saber qué mostrar—.

Qué sigue

Módulo 7 conquistado: dominas el routing —rutas, parámetros, layouts anidados, loaders/actions, rutas protegidas— y hasta construiste tu propio router. Tu app ya tiene pantallas navegables. Lo que falta para que sea usable de verdad son FORMULARIOS que no frustren: validados, con errores claros y accesibles. El módulo 8 trae React Hook Form, Zod y los formularios multi-paso.