Leia o URL completo atual com o React?

Como obtenho o URL completo de um componente ReactJS?

Eu estou pensando que deveria ser algo como, this.props.locationmas éundefined

window.location.href é o que você está procurando.

Se você precisar do caminho completo do seu URL, poderá usar o Javascript baunilha:

window.location.href

Para obter apenas o caminho (menos o nome de domínio), você pode usar:

window.location.pathname

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

Fonte: Propriedade Nome do caminho da Localização - W3Schools

Se você ainda não estiver usando o "react-router", poderá instalá-lo usando:

yarn add react-router

em um React.Component dentro de uma "Rota", você pode chamar:

this.props.location.pathname

Isso retorna o caminho, sem incluir o nome do domínio.

Obrigado @ abdulla-zulqarnain!

this.props.locationé um recurso de roteador de reação , você precisará instalar se quiser usá-lo.

Nota: não retorna o URL completo.

Você está recebendo undefinedporque provavelmente possui os componentes externos ao React Router.

Lembre-se de que você precisa garantir que o componente do qual você está chamando this.props.locationesteja dentro de um <Route />componente como este:

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

Em seguida, dentro do componente Painel, você tem acesso a this.props.location...

Para obter a instância ou o local atual do roteador, é necessário criar um componente de ordem superior com withRouter from react-router-dom. caso contrário, quando você estiver tentando acessar, this.props.locationele retornará undefined

Exemplo

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

class className extends Component {

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

export default withRouter(className)

Apenas para adicionar um pouco de documentação adicional a esta página - estou lutando com esse problema há algum tempo.

Como dito acima, a maneira mais fácil de obter o URL é via window.location.href.

podemos então extrair partes do URL através de Javascript baunilha usando let urlElements = window.location.href.split('/')

console.log(urlElements)Veríamos então a matriz de elementos produzida chamando .split () na URL.

Depois de encontrar qual índice na matriz você deseja acessar, você poderá atribuí-lo a uma variável

let urlElelement = (urlElements[0])

E agora você pode usar o valor de urlElement, que será a parte específica do seu URL, onde quiser.

Como alguém mencionou, primeiro você precisa do react-routerpacote. Mas o locationobjeto que ele fornece contém um URL analisado.

Mas se você deseja um URL completo sem acessar variáveis ​​globais, acredito que a maneira mais rápida de fazer isso seria

...

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

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

  ...

href é aquele que contém um URL completo.

Para o que memoizeeu costumo usar lodash, é implementado dessa maneira principalmente para evitar a criação de novos elementos sem necessidade.

PS: É claro que você não está restrito a navegadores antigos new URL(), mas pode tentar algo, mas basicamente toda a situação é mais ou menos inútil, porque você acessa a variável global de uma ou de outra maneira. Então, por que não usar window.location.href?

Você pode acessar a URL / URL completa com 'document.referrer'

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