Aprende a implementar rutas protegidas en React Router usando un componente wrapper, redirecciones automáticas y una página not found para rutas desconocidas. Esta guía es útil si estás construyendo una aplicación con autenticación y necesitas controlar el acceso a vistas privadas como un perfil de usuario.
¿Cómo se crea una ruta protegida en React Router?
La idea es envolver el componente que quieres proteger dentro de otro componente que evalúe si el usuario está autenticado. Si lo está, renderiza el contenido. Si no, lo redirige a otra ruta.
El flujo arranca creando una nueva ruta para /profile dentro del archivo principal de rutas, junto con su componente Profile. Hasta aquí nada distinto a una ruta normal. Lo interesante viene cuando agregas un wrapper llamado ProtectedRoute que decide si esa vista se muestra o no [01:05].
¿Qué hace el componente ProtectedRoute?
Es un componente envolvedor que recibe un valor booleano y un children. Con esos dos datos decide qué renderizar.
La estructura básica incluye:
- Una interface de TypeScript llamada
ProtectedRouteProps con la propiedad isAuthenticated de tipo boolean.
- Una propiedad
children de tipo React.ReactNode que representa el componente hijo.
- Un condicional que evalúa el booleano y decide entre redirigir o mostrar el contenido.
¿Qué es un componente wrapper en React? Es un componente que envuelve a otro para añadirle lógica extra, como validar permisos, antes de renderizarlo. Aquí lo usamos para proteger vistas según autenticación.
¿Cómo funciona la redirección con Navigate?
React Router Dom expone el componente Navigate, que al renderizarse cambia la URL del navegador hacia la ruta que le indiques en la prop to.
Dentro de ProtectedRoute, el condicional queda así: si isAuthenticated es false, retornas <Navigate to="/" /> para enviar al usuario al home. Si es true, retornas {children} y se renderiza el componente protegido [04:30].
¿Cómo se usa ProtectedRoute dentro de las rutas?
Envuelves el componente que quieres proteger con tu wrapper y le pasas la prop de autenticación. Eso es todo.
En el archivo de rutas, el Profile ya no se coloca solo. Va dentro de ProtectedRoute con la prop isAuthenticated recibiendo true o false. En esta clase se simula la autenticación con un booleano fijo, porque todavía no hay un sistema de login real conectado [05:45].
Cuando pones isAuthenticated={false} y entras a /profile en el navegador, la app te redirige al home automáticamente. Cuando lo cambias a true, la vista de perfil se muestra sin problemas. También puedes agregar un link en el navbar hacia /profile para probar la navegación desde la interfaz.
¿Por qué simular la autenticación con un booleano? Porque permite probar la lógica de protección sin depender de un backend o un sistema de login. Después reemplazas el booleano por el estado real del usuario.
¿Cómo crear una página Not Found para rutas desconocidas?
React Router permite definir una ruta comodín con el carácter asterisco (*) que captura cualquier URL no mapeada en tu aplicación.
Los pasos concretos son:
- Crear un componente
NotFound con el mensaje que quieras mostrar al usuario.
- Agregar una nueva ruta con
path="*" apuntando a ese componente.
- Importar el componente en el archivo de rutas y guardar.
Con esto, cualquier URL inventada como /cualquiercosa deja de mostrar una vista en blanco y pasa a renderizar tu componente not found con un mensaje claro [08:10]. Las rutas conocidas siguen funcionando igual.
¿Por qué importa tener una ruta comodín?
Mejora la experiencia del usuario y evita pantallas vacías que generan confusión. También te permite agregar acciones como un botón para volver al inicio o links a las rutas principales de tu app.
Este patrón se combina muy bien con ProtectedRoute: las rutas válidas pero privadas redirigen al home, y las rutas inexistentes muestran not found. Dos comportamientos distintos para dos escenarios distintos.
Reto práctico para reforzar lo aprendido
Aplica este mismo patrón en tu propio proyecto, pero con un componente diferente a Profile. Puede ser un dashboard, una sección de configuración o cualquier vista privada que tengas.
Cuéntame en los comentarios qué componente decidiste proteger y cómo manejaste la redirección.
