¿Leer la URL completa actual con React?

¿Cómo obtengo la URL completa desde un componente ReactJS?

Estoy pensando que debe ser algo como this.props.location, pero esundefined

window.location.href es lo que estás buscando.

Si necesita la ruta completa de su URL, puede usar Javascript vanilla:

window.location.href

Para obtener solo la ruta (menos el nombre de dominio), puede usar:

window.location.pathname

console.log(window.location.pathname); //yields: "/js" (where snippets run)
console.log(window.location.href);     //yields: "https://stacksnippets.net/js"

Fuente: Nombre de ruta de ubicación Propiedad - W3Schools

Si aún no está usando "react-router", puede instalarlo usando:

yarn add react-router

luego en un React.Component dentro de una "Ruta", puede llamar:

this.props.location.pathname

Esto devuelve la ruta, sin incluir el nombre de dominio.

¡Gracias @ abdulla-zulqarnain!

this.props.locationes una función de enrutador de reacción , tendrá que instalarla si desea utilizarla.

Nota: no devuelve la URL completa.

Lo está obteniendo undefinedporque probablemente tenga los componentes fuera de React Router.

Recuerde que debe asegurarse de que el componente desde el que está llamando this.props.locationesté dentro de un <Route />componente como este:

<Route path="/dashboard" component={Dashboard} />

Luego, dentro del componente Tablero, tiene acceso a this.props.location...

Para obtener la instancia del enrutador actual o la ubicación actual , debe crear un componente de orden superior con withRouter from react-router-dom. de lo contrario, cuando intente acceder this.props.location, volverá undefined

Ejemplo

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';

class className extends Component {

      render(){
           return(
                ....
                  )
              }
}

export default withRouter(className)

Solo para agregar un poco más de documentación a esta página, he estado luchando con este problema durante un tiempo.

Como se dijo anteriormente, la forma más fácil de obtener la URL es a través de window.location.href.

luego podemos extraer partes de la URL a través de Javascript vanilla usando let urlElements = window.location.href.split('/')

Luego, console.log(urlElements)veríamos la matriz de elementos producidos al llamar a .split () en la URL.

Una vez que haya encontrado a qué índice de la matriz desea acceder, puede asignarlo a una variable

let urlElelement = (urlElements[0])

Y ahora puedes usar el valor de urlElement, que será la parte específica de tu URL, donde quieras.

Como alguien más mencionó, primero necesitas react-routerpackage. Pero el locationobjeto que le proporciona contiene URL analizada.

Pero si desea una URL completa sin acceder a las variables globales, creo que la forma más rápida de hacerlo sería

...

const getA = memoize(() => document.createElement('a'));
const getCleanA = () => Object.assign(getA(), { href: '' });

const MyComponent = ({ location }) => {
  const { href } = Object.assign(getCleanA(), location);

  ...

href es el que contiene una URL completa.

Para lo memoizeque suelo usar lodash, se implementa de esa manera principalmente para evitar la creación de nuevos elementos sin necesidad.

PD: Por supuesto, si no estás restringido por navegadores antiguos, es posible que quieras probar new URL()algo, pero básicamente toda la situación es más o menos inútil, porque accedes a la variable global de una forma u otra. Entonces, ¿por qué no usarlo window.location.hrefen su lugar?

Puede acceder a la uri / url completa con 'document.referrer'

Consulte https://developer.mozilla.org/en-US/docs/Web/API/Document/referrer