使用React阅读当前的完整URL？

如何从ReactJS组件中获取完整的URL？

我想它应该是这样的this.props.location，但它是undefined

window.location.href 是您要寻找的。

如果您需要URL的完整路径，则可以使用原始Javascript：

window.location.href

要仅获取路径（减去域名），可以使用：

window.location.pathname

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

源：位置路径名属性-W3Schools

如果您尚未使用“反应路由器”，则可以使用以下方法进行安装：

yarn add react-router

然后在“路线”中的React.Component中，可以调用：

this.props.location.pathname

这将返回路径，不包括域名。

谢谢@ abdulla-zulqarnain！

this.props.location是react-router功能，如果要使用它，必须安装。

注意：不返回完整网址。

你越来越 undefined之所以会这么做，因为您可能在React Router之外拥有组件。

请记住，您需要确保要调用this.props.location的<Route />组件位于这样的组件内部：

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

然后在Dashboard组件内，您可以访问this.props.location...

要获取当前路由器实例或当前位置，您必须使用withRouter from 创建一个高级组件react-router-dom。否则，当您尝试访问时this.props.location时它将返回 undefined

例

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

class className extends Component {

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

export default withRouter(className)

只是为了在此页面上添加更多文档-我已经为这个问题苦苦挣扎了一段时间。

如上所述，获取网址的最简单方法是通过 window.location.href。

然后，我们可以使用原始Javascript提取URL的一部分 let urlElements = window.location.href.split('/')

然后我们会 console.log(urlElements)，看到通过在URL上调用.split（）产生的元素数组。

找到要访问的数组中的索引后，可以将其分配给变量

let urlElelement = (urlElements[0])

现在，您可以随时随地使用urlElement的值，该值将是URL的特定部分。

正如其他人提到的，首先您需要react-router包装。但是location它提供给您的对象包含已解析的url。

但是，如果您很想在不访问全局变量的情况下非常想要完整的网址，那么我认为最快的方法是

...

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

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

  ...

href 是包含完整网址的网址。

对于memoize我通常使用lodash，它的实现主要是为了避免不必要地创建新元素。

PS：当然，您不受尝试使用new URL()旧浏览器的限制，但是基本上整个情况几乎没有意义，因为您以一种或另一种方式访问​​全局变量。那么为什么不使用它window.location.href呢？

您可以使用“ document.referrer”访问完整的uri / url

检查https://developer.mozilla.org/zh-CN/docs/Web/API/Document/referrer