Obtener URL actual en React

1. Obtener la URL actual en React - Solución JavaScript Vanilla
2. Obtener la URL actual a través de React Router
3. Obtener la URL actual React Router Hooks

Al desarrollar aplicaciones de una sola página en React, el enrutamiento es la pieza clave del rompecabezas. En cada URL, puede haber componentes u otros elementos visuales que deban mostrarse.

Al crear una aplicación React, los desarrolladores a menudo necesitan realizar varias acciones basadas en la URL actual. Los desarrolladores pueden utilizar varias interfaces diferentes para acceder a la URL actual.

Obtener la URL actual en React - Solución JavaScript Vanilla

Dado que React se basa en JavaScript normal, puede acceder a la propiedad location en la interfaz de window. Para obtener la ruta completa de la URL actual, puede usar window.location.href, y para obtener la ruta sin el dominio raíz, acceda a window.location.pathname en su lugar.

Veamos el ejemplo:

class App extends Component {
  render() {
    console.log(window.location.href);
    return <h1>Hi! Try edit me</h1>;
  }
}

Si renderiza el componente App en playcode.io, la consola mostrará la URL completa de su proyecto. En este caso, sería https://playcode.io/837468/. Si, en cambio, console.log(window.location.pathname), la salida de la consola será /837468/. Siga este enlace para jugar con el código usted mismo.

Leer window.location es una buena y sencilla solución para obtener la URL actual. Sin embargo, se basa en la interfaz general window.location.

Si está buscando una solución específica de React, continúe leyendo.

Obtener la URL actual a través de React Router

React proporciona el paquete history, y un objeto location separado a través de props. Es esencialmente el mismo objeto location disponible en la interfaz de window, pero está personalizado para React.

Este objeto representa la URL actual de la aplicación. La forma más sencilla de acceder es leyendo el objeto location de la props.

Sin embargo, para proporcionar location vía props, debes instalar React Router, y el componente hijo debe estar conectado al componente Route. Por ejemplo:

<Route path="/" component={App}></Route>

En este ejemplo, el componente de la aplicación tendrá acceso al objeto location a través de props. Dentro de este componente, podemos leer this.props.location.pathname, que devolverá una URL de ruta que no incluye el dominio raíz.

Los componentes secundarios renderizados con un componente <Route> también tienen acceso a la propiedad de location. He aquí un ejemplo:

<Route path="/" render={() => <App></App>} />

En este caso, el componente de la aplicación seguirá teniendo acceso a la propiedad de location.

Si this.props.location devuelve undefined, lo más probable es que su componente React esté representado fuera del componente personalizado <Route>. En este caso, puede importar el componente de orden superior (HOC) withRouter y usarlo para acceder a los props de location e history.

withRouter se puede importar desde el paquete react-router-dom. He aquí un ejemplo:

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
class App extends Component {
      render(){...}
}

export default withRouter(App)

Envolver el componente App de exportación predeterminado en un HOC withRouter le permitirá acceder a props que, de otro modo, solo estarían disponibles para componentes renderizados con un componente especial <Route>.

Obtener la URL actual React Router Hooks

Los componentes funcionales le permiten utilizar ganchos. En nuestra situación, useLocation() es un gancho excelente que proporciona una manera fácil de acceder al objeto location.

Se puede importar desde el paquete react-router-dom. Este ejemplo usa el gancho useLocation() para obtener un objeto de location y almacenarlo en una variable.

Echemos un vistazo:

import { useLocation } from "react-router-dom"
const sampleLocation = useLocation();

Una vez que haya almacenado el objeto location en una variable, puede acceder a la ruta (URL sin el dominio raíz) accediendo a sampleLocation.pathname.

También puede acceder a la propiedad location del objeto history.

El gancho useHistory le permite acceder a él. Sin embargo, debido a problemas de mutabilidad, los documentos oficiales react-router recomiendan seguir con el objeto de location.