La propiedad window.location es una de las propiedades disponibles para acceder y modificar datos del navegador desde nuestro código. Por ello, pertenece al Browser Object Model, también conocido como BOM. En este post, te enseñaremos cómo redirigir una ruta con window.location, una API fundamental para interactuar con los datos de la URL de una página web.
¿Cómo redirigir una ruta con window.location?
Redirigir una ruta con window.location es una acción fundamental en cualquier página web. Un ejemplo de una redirección con la que nos encontramos frecuentemente es cuando iniciamos sesión en una aplicación web. Una vez escribimos nuestras credenciales y el login es exitoso, la aplicación nos redirige automáticamente hacia la página de inicio. A continuación, te enseñaremos cómo ejecutar esta acción.
Para redirigir una ruta con window.location podemos usar distintos métodos de esta API, como assign, replace y href. Puedes encontrar una explicación de estos métodos en nuestro post sobre la propiedad window.location y algunos ejemplos de uso en el artículo window.location de la página oficial de Mozilla Developer Network.
Entonces, podemos utilizar el comando window.location.href e igualarlo a la nueva URL a la que queramos llevar al usuario. En nuestro caso, queremos redirigir al inicio de nuestra aplicación, que se encuentra en la barra por defecto de nuestro localhost. Por ello, para redirigir una ruta con window.location a la página inicial de nuestro proyecto, podemos insertar una línea de código como la siguiente:
window.location.href = «http://127.0.0.1:8000/»;
Ten presente que la anterior línea de código debe colocarse cuidadosamente en nuestro proyecto, pues la redirección de nuestra página debe darse en los momentos adecuados. En nuestro caso, la anterior línea de código sucede justo después de un login exitoso dentro de una sección try. A continuación, puedes ver un ejemplo de esta línea dentro del contexto de una función:
async loginUser (username, passwordInput) {
try {
await signupService.loginUser (username, passwordInput);
window.location.href = «http://127.0.0.1.8000/»;
} catch (error) {
pubSub.publish (pubSub.TOPICS.SHOW_ERROR_NOTIFICATION, error);
}
}
Debes tener en cuenta que tener una línea de código como la anterior puede ser peligroso, pues si el día de mañana decidimos levantar nuestro proyecto en otro puerto, la función será inútil. Por ello, te recomendamos no redirigir una ruta con window.location usando el código de puerto. Entonces, como nosotros estamos simplemente accediendo a la página inicial de nuestro proyecto, podremos escribir lo siguiente:
window.location.href = «/»
Con el cambio anterior, estamos diciéndole al navegador que se dirija a / dentro del dominio en el que estamos. Es decir, que se dirija a la ruta por defecto, que en nuestro caso es simplemente un listado de contenido.
La lógica anterior funcionará para cualquier ruta que quieras usar. Esto significa que no es necesario declarar el puerto y el código de nuestro proyecto para redirigir una ruta con window.location. Basta con usar la barra y definir el documento al que queremos ir. A continuación, te ponemos otro ejemplo de redirección usando el nombre de uno de los documentos de nuestro proyecto:
window.location.href «/signup.html»
Lo anterior funciona porque el comando window.location.href, cuando no recibe una URL determinada, intentará enrutar sobre el dominio actual.
¿Qué sigue?
Ahora que sabes cómo redirigir una ruta con window.location, te invitamos a seguir aprendiendo sobre las acciones fundamentales en un proyecto web. Para ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un espacio donde aprenderás todo lo necesario para convertirte en un experto del desarrollo web en pocos meses. ¡No dudes en pedir más información para impulsar tu vida y tu carrera!
