React Router es una librería que nos permite desarrollar una navegación dinámica para nuestras aplicaciones creadas con React. En esta navegación, no solo podemos crear pasos fluidos entre páginas, sino que también podemos ejecutar ciertos bloqueos cuando el navegante no tiene los permisos necesarios. En este post, te enseñaremos qué es y cómo ejecutar la protección de rutas con React Router, fundamental para guiar al usuario a lo que necesitamos.
¿Qué es la protección de rutas con React Router?
Cuando hablamos de la protección de rutas con React Router, nos referimos a programar un bloqueo o redirección de las secciones de nuestra aplicación a la que no queremos que llegue un usuario. Esto es muy útil cuando queremos definir que a ciertas secciones solo se puede acceder cuando un usuario ha iniciado sesión. Entonces, por ejemplo, no queremos que un usuario llegue a la página de hacer nuevo tweet si, primero, no ha puesto sus credenciales. En este caso, lo que queremos es redirigirlo a la página de login. Para ello, deberemos utilizar una mezcla del estado en React con los componentes principales de React Router.
¿Cómo ejecutar la protección de rutas con React Router?
Para enseñarte cómo ejecutar la protección de rutas con React Router, utilizaremos el ejemplo que hemos venido manejando a lo largo de varios posts. En este ejemplo de protección de rutas con React Router, suponemos que estamos creando una aplicación para React que simula la red social Twitter. Entonces, tenemos una página para iniciar sesión que hemos creado en nuestro post sobre crear una página de login en React. Luego, hemos decidido que la idea de que un usuario esté o no dentro de su sesión es un estado, porque es un dato cambiante. Entonces, hemos aprendido a controlar estado login en React y a usar este estado para ejecutar muchas acciones.
A continuación, te mostramos el estado que hemos creado, junto a los métodos que controlan sus dos posibles valores:
// rutas privadas react router dom v6
const [isLogged, setIsLogged] = useState (isInitiallyLogged);
const handleLogin = ( ) => {
setIsLogged (true);
};
const handleLogout = ( ) => {
setIsLogged (false);
};
Ahora, a partir de este estado, debemos encontrar una manera de decirle a las distintas rutas que hemos creado que rendericen o no los componentes según el estado. Además, debemos decirle que, cuando no rendericen este componente, redirijan al componente LoginPage para que el usuario inicie sesión.
A continuación, te enseñaremos cómo escribir estas condiciones según React Router en su versión 6.2.2. Esto quiere decir que usaremos el componente Routes con los componentes hijos Route. Te sugerimos leer nuestros posts sobre declarar rutas con React Router y redirigir una ruta con React Router para estar al día con este tema.
Siguiendo la lógica de React Router 6, deberemos crear un componente que va a ejecutar la protección de rutas con React Router. Este componente hará que, si el estado setIsLogged es igual a true, el componente actual de nuestra ruta se renderice. Sin embargo, si el estado de setIsLogged es igual a false, el componente se encargará de redirigir la ruta hacia la página de inicio de sesión.
Entonces, lo primero que debemos hacer es crear un nuevo archivo con un componente que maneje esta lógica. Nosotros llamaremos a este componente requireAuth.js. A continuación, puedes ver las líneas de código que lo hacen posible:
// rutas protegidas react router v6
const RequireAuth = ({isLogged, children}) => {
if (!isLogged) {
return <Navigate to=’/login”/>
}
return children
};
Ahora que tenemos el componente que ejecuta la protección de rutas con React Router, podemos usarlo para envolver todas las rutas que requieran protección. Entonces, basta con poner el componente RequireAuth detrás y delante del parámetro element de una ruta para protegerla. A continuación, te ponemos un ejemplo:
// rutas privadas
<Route
path = ‘/tweets/new’
element = {
<RequireAuth>
<NewTweetPage />
</RequireAuth>
}
/>
Ten presente que deberás importar el componente RequireAuth antes de llamarlo en tu archivo de renderización. Como puedes ver, el children de este componente será NewTweetPage, por lo que se renderiza solo cuando el estado sea verdadero.
¿Cuál es el siguiente paso?
Después de leer este post, has aprendido cómo ejecutar la protección de rutas con React Router y has dado un paso para dominar esta librería. Más adelante podrás aprender a crear rutas privadas react, rutas privadas react router dom v6 y entenderás cómo proteger rutas react router dom v6. Ahora, el siguiente nivel es dedicarte por completo a tu aprendizaje. Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un espacio intensivo donde aprenderás a dominar herramientas y lenguajes de programación para la web, como JavaScript, HTML, CSS, React, webPack y React Router. ¿A qué esperas para dar este paso? ¡Te esperamos para acompañarte en esta aventura que te cambiará la vida!
