Mejorar la experiencia del usuario en una aplicación con React Router Dom implica resolver un detalle que parece pequeño, pero que marca la diferencia: redirigir al usuario después del login a la URL desde la que llegó, no a una página por defecto como /profile. Este reto es ideal si ya entiendes rutas privadas y protegidas y quieres dar un paso más en user experience.

¿Por qué importa el redirect inteligente después del login?

Imagina que entras a editar un blog post específico, pero no estás autenticado. La aplicación te manda al formulario de login, te autenticas y, en lugar de devolverte a esa URL puntual, te lleva a tu perfil.

Ahí pasa el problema de UX: tú no querías ver tu perfil, querías terminar la acción que iniciaste. La aplicación rompe la intención original del usuario y lo obliga a navegar de nuevo hasta donde estaba.

¿Qué es un redirect en una aplicación web? Es una redirección automática que envía al usuario de una URL a otra, normalmente para proteger rutas privadas o forzar autenticación antes de mostrar cierto contenido.

¿Cómo resolver el redirect con useLocation en React Router Dom?

La pista principal del reto [01:45] es el hook useLocation. Este hook te entrega información sobre la ruta actual y permite pasarle al login la referencia de la página desde la cual se hizo el redirect.

La idea general se resume en tres pasos:

• Cuando una ruta protegida hace redirect al login, guarda la ubicación original usando useLocation.
• Pasa esa ubicación al componente de login como state o como parámetro.
• Después de autenticar, lee esa referencia y haz redirect a esa URL en lugar de mandar al profile.

Si el usuario llegó al login directamente, sin venir de una ruta protegida, entonces el comportamiento por defecto sigue siendo enviarlo a su perfil.

¿Qué hace exactamente useLocation?

Es un hook de React Router Dom que te devuelve el objeto location actual. Con él puedes leer el pathname, los parámetros de búsqueda y cualquier state que se haya pasado al navegar.

En este reto, useLocation es la herramienta que conecta dos momentos: el instante en que se intercepta al usuario y el instante en que se le devuelve a su destino original.

¿Por qué useLocation y no useNavigate? useNavigate sirve para ejecutar la navegación, pero useLocation es la que te da el contexto de dónde está el usuario y de dónde viene. Las dos se complementan.

¿Cómo abordar el reto paso a paso?

Antes de escribir código, vale la pena pensar la lógica como un flujo. El usuario entra a una URL protegida, el sistema lo intercepta, lo manda al login con una pista de hacia dónde quería ir, y al autenticarse esa pista se usa para devolverlo.

• Detecta la ruta original en el momento del redirect hacia el login.
• Almacena esa ruta de forma accesible para el formulario de autenticación.
• Al completar el login, lee esa ruta y ejecuta la navegación final.
• Si no hay ruta guardada, redirige al profile como acción por defecto.

¿Existe un ejemplo oficial en React Router Dom?

Sí. La documentación oficial de React Router Dom incluye un ejemplo con un comportamiento muy parecido [02:30], que sirve como referencia para entender el patrón. No es la misma aplicación, pero la filosofía es la misma: usar el estado de navegación para preservar la intención del usuario.

¿Qué soluciones alternativas puedes explorar?

Aunque la pista oficial es useLocation, este tipo de problemas admite varios enfoques. Puedes resolverlo con:

• useLocation combinado con useNavigate y el state de la ruta.
• Parámetros en la URL del login, tipo /login?redirect=/edit/post-123.
• Almacenamiento temporal en context o en un store global.
• localStorage o sessionStorage, aunque suele ser menos elegante para este caso.

Cada opción tiene ventajas y costos. La de useLocation con state es la más idiomática dentro de React Router Dom, pero si llegaste a una solución distinta, también es válida mientras conserve la intención original del usuario.

Comparte en los comentarios qué camino tomaste, qué decisiones de diseño tomaste detrás de tu implementación y si encontraste alguna fricción. La idea es tener una discusión sana sobre cuál es la mejor forma de resolver este problema de UX.