Cómo crear rutas protegidas con React Router

Crear rutas protegidas en React te permite bloquear el acceso a páginas privadas como favoritos, perfil o reservas, y redirigir al usuario al login cuando no está autenticado. Es la base para que solo usuarios logueados vean su información personal dentro de una aplicación como Platzi House.

El problema inicial es simple: sin ninguna protección, cualquier persona puede navegar a favoritos o perfil sin haber iniciado sesión. La página se muestra, aunque no tenga contenido, y eso no significa que esté privada, porque igual se puede navegar. Y aquí viene lo interesante: una página de perfil accesible sin login no tiene ningún sentido.

Cómo funciona una ruta protegida y por qué usar local storage

Una ruta protegida es un componente que decide, antes de renderizar una página, si el usuario tiene permiso para verla. Si lo tiene, muestra el contenido. Si no, lo redirige al login para autenticarse.

Para simular los datos de sesión nos apoyamos en el local storage del navegador [00:32]. Ahí se guarda un valor llamado PlatziHouse_user, separado por guion bajo. Cuando ese valor es true, el usuario puede entrar; cuando es false, se redirige.

¿Qué es el local storage? Es un almacenamiento del navegador que guarda datos de forma persistente en pares clave-valor. Aquí lo usamos para recordar si el usuario inició sesión mediante la propiedad PlatziHouse_user.

Cómo crear la función que verifica la autenticación

El primer paso es crear una util function dentro de la carpeta utils [01:12]. La llamamos auth y su tarea es una sola: decidir si el usuario está autenticado o no.

Esta función, isAuthenticated, lee el valor del local storage y responde según su estado. Cada vez que la llames, te devuelve true o false. Simple y reutilizable.

Cómo construir el componente Protected Route

El segundo paso es un componente que envuelva cada ruta que quieras proteger. Funciona como una especie de provider alrededor de cada página, indicando que ese componente en específico requiere login [02:15].

Dentro de la carpeta de componentes creamos una carpeta auth y ahí el archivo ProtectedRoute.tsx, en singular, porque sí tiene algo que renderizar [02:50]. Estas son las piezas que importa:

• El tipo ReactNode desde React, que indica que renderizará un nodo de React dentro de la ruta.
• Los componentes Navigate y el hook useLocation desde React Router.
• La función isAuthenticated que acabamos de crear en utils/auth.

El componente recibe una prop llamada children, que es justamente ese ReactNode. Con useLocation detectamos dónde está ubicado el usuario dentro de las rutas.

¿Para qué sirve el prop children en un componente? Representa el contenido que envuelve el componente. En una ruta protegida, children es la página que quieres mostrar solo si el usuario está autenticado.

Cómo redirigir al login cuando el usuario no está autenticado

La validación central es directa: si isAuthenticated devuelve false, el componente ejecuta Navigate hacia el login [03:50].

Aquí entra un detalle útil: el atributo replace. Además de redirigir, guarda un estado que permite devolver al usuario a la página donde estaba antes de ser enviado al login. Así la experiencia se siente continua.

Cómo aplicar la ruta protegida en el archivo de rutas

Con la función y el componente listos, vamos al archivo de rutas para indicar cuáles requieren login. En Platzi House las páginas privadas son favoritos, perfil y booking [05:00].

El proceso para proteger favoritos es este:

1. Importa el componente ProtectedRoute en el router.
2. En el element de la ruta, envuelve el componente de la página dentro de ProtectedRoute.
3. Ajusta el cierre para que ProtectedRoute quede alrededor del FavoritePage.

Cada vez que alguien intente navegar a favoritos, ProtectedRoute detecta si el usuario está logueado. Si la respuesta es true, renderiza la página. Si es false, lo lleva al login [06:20].

Al probar en el navegador, la navegación entre home, buscar, perfil y login funciona sin problema. Pero al intentar entrar a favoritos, la app hace la redirección automática al login [07:00]. Ese es el momento en que la ruta privada entra en funcionamiento.

Qué habilidades y conceptos aprendes con las rutas protegidas

Más allá del código, aquí practicas varias ideas clave del desarrollo con React:

• Uso de ReactNode como tipo para renderizar contenido dinámico dentro de un componente.
• Manejo del hook useLocation para conocer la ubicación actual del usuario.
• Redirección declarativa con el componente Navigate y su atributo replace.
• Separación de responsabilidades creando una util function como isAuthenticated.
• Simulación de sesión con PlatziHouse_user en el local storage.

Todo esto se conecta en un patrón reutilizable: un componente que envuelve páginas y actúa como guardián de acceso.

Como tarea, completa la protección de las rutas profile y booking para que solo sean accesibles con el usuario logueado. En la siguiente clase construiremos un login simulado para entrar y salir de estas rutas.

¿Ya intentaste proteger tus propias rutas? Cuéntame en los comentarios cómo te fue aplicando ProtectedRoute en tu proyecto.