React Router es una librería que nos facilita el proceso de diseñar la navegación de nuestras aplicaciones. Esta librería utiliza componentes y hooks para crear una navegación dinámica en la que las rutas se crean en el momento de ejecución y no antes del render. En este post, te enseñaremos qué es y cómo funciona la palabra clave replace en React Router, fundamental para controlar al máximo la navegación de tus proyectos.
¿Qué es replace en React Router?
Replace en React Router es una palabra clave que podemos insertar en nuestras rutas o componentes. Esta es una palabra nueva en React Router que, como lo muestran las preguntas de stackoverflow, no todos estamos acostumbrados a utilizar. Sin embargo, su función es muy sencilla: ayudarnos a alterar el orden en el que se construye el historial de navegación.
¿Y qué es eso del historial de navegación? Cuando utilizamos el componente o función navigate de React Router estamos creando entradas en el historial de navegación del usuario. Es decir, con cada llamada que hacemos para navegar en nuestra aplicación, estamos añadiendo una entrada a este historial. Estas entradas, por defecto, se van acumulando en el orden cronológico en el que se hayan usado.
Lo que nos permite hacer la palabra clave replace en React Router es, en lugar de crear una entrada nueva cuando hacemos navigate, reemplazar entradas específicas. En este sentido, replace altera el orden por defecto del historial del navegador, que normalmente se construye con una lógica push.
Esta alteración es posible gracias a que React Router usa la API history de HTML. Puedes aprender más sobre esta API en el post History API de la MDN.
Un uso muy común de esta palabra clave es cuando queremos evitar que el usuario haga login múltiples veces.
La palabra clave replace en React Router es particularmente útil cuando queremos evitar que el usuario vuelva a ejecutar un paso cuando vuelve hacia atrás en su historial de navegación. Un ejemplo de esto es cuando, en una red social, un usuario busca una página a la que solo tiene acceso cuando hace login. Entonces, nuestra aplicación lo volverá a dirigir hacia la página de login.Luego, el usuario podrá explorar la página a la que ahora tiene acceso.
Sin embargo, tenemos un problema. ¿Qué verá el usuario si usa las flechas de su navegador para volver hacia atrás? Pues la página de login pidiéndole iniciar sesión. Esto es lo que queremos evitar al modificar el orden del historial de navegación. Para ello, usamos replace en React Router.
¿Cómo funciona el replace en React Router?
Si partimos del caso anterior, podemos usar el replace en React Router para “pisar” la ruta anterior, es decir, la página de login. En este sentido, estaríamos reemplazando la entrada de login por otra que puede ser, por ejemplo, la entrada anterior a ella. Esto le permitirá al usuario regresar a la página en la que estaba previamente a ejecutar el login.
Para usar el replace en React Router,basta con pasar la palabra clave replace como parámetro de la ruta que hemos creado con navigate. Esto hará que esa ruta en específico se cree con la lógica de replace. Luego, podemos ir a la función navigate que esté manejando la lógica de nuestra navegación e insertar un objeto. Este objeto tendrá una única clave, replace: true.
Ten presente que la lógica de a quién le pasas el replace en React Router depende de cómo tengas establecido tu proyecto. Puede que tengas una función específica para manejar la navegación de login o puede que, simplemente, tengas una ruta. En estos casos, te aconsejamos probar distintas posiciones y hacer tests desde el inspector de tu navegador. Nadie más que tú sabe lo que funciona en tu proyecto.
Después de leer este post sabes exactamente qué es y cómo funciona la palabra clave replace en React Router, algo fundamental para mejorar la navegación de tus proyectos web. Sin embargo, todavía queda mucho por aprender acerca del mundo del desarrollo web, sus herramientas y lenguajes. Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva donde aprenderás, entre muchas otras cosas, a dominar lenguajes y herramientas para la web como JavaScript, HTML, JSX y CSS. ¿Quieres seguir aprendiendo con nosotros? ¡Inscríbete ahora y da el paso que te cambiará la vida!
