Leia o URL completo atual com o React?

135

Como obtenho o URL completo de um componente ReactJS?

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

reactjs Doug
fonte

Respostas:

218

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

provavelmente
fonte
16
Observe que pode haver problemas no lado do servidor, se não estiver configurado corretamente.
Shota
2
Eu precisava de window.location para um recurso do lado do cliente. Portanto, defino o local no estado do meu componente onMount para evitar problemas durante a renderização no servidor.
Arvind Sridharan
Não está funcionando. ou gentilmente me ajude com a estrutura disso em reagir. Eu usei const ddd = window.location.href; console.log (ddd);
Shurvir Mori
1
o webpack vai reclamar com esse ditado 'janela não está definida'
Franz Veja
@FranzVeja sim, não há "janela" no código do servidor, portanto, se esse for o seu ambiente, você precisará usar algo como req.originalUrlexpress ou outros enfeites. As várias bibliotecas de roteamento de reação que têm suporte a SSR têm métodos para obter essas informações.
provavelmente até
60

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"
Expandir snippet

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!

lewdev
fonte
2
você pode fazer apenas como que por caminhowindow.location.pathname
Abdulla Zulqarnain
13

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...

James
fonte
3
E se o seu componente não estiver dentro de um, <Route />você poderá usar o componente de ordem superior do Router .
Ahmad Maleki
3

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)
Alex Varghese
fonte
1

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.

to240
fonte
0

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?

Yurii Haiovyi
fonte
-3

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

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

Amit Lopes
fonte
O referenciador é o URL da página em que você estava antes de chegar a esta página. Também não pode ser definido. Embora possa ser útil para rastrear movimentos do usuário, raramente é o que você deseja ao procurar o URL.
Alexis Wilke