Question

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

我认为它应该是this.props.location，但它是undefined

Answer 1

window.location.href是您正在寻找的。

Answer 2

this.props.location is a react-router feature，如果您想使用它，则必须安装。

注意：不会返回完整的网址。

Answer 3

如果您需要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"

来源：Location pathname Property - W3Schools

如果您尚未使用“反应路由器”，则可以使用：

yarn add react-router

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

this.props.location.pathname

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

感谢@ abdulla-zulqarnain！

Answer 4

您将获得undefined，因为您可能拥有React Router之外的组件。

请记住，您需要确保您调用this.props.location的组件位于<Route />组件中，例如：

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

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

Answer 5

window.location.href是您所需要的。但是，如果您正在使用React Router，则可能会发现有用的 useLocation 和 useHistory 钩子。两者都创建了一个具有您可以读取的pathname属性的对象，并且对其他很多东西很有用。 Here's a youtube video explaining react router hooks

两者都会为您提供所需的信息（不带域名）

import { useHistory ,useLocation } from 'react-router-dom';
const location = useLocation()
location.pathname

const history = useHistory()
history.location.pathname

Answer 6

只需向此页面添加更多文档-一段时间以来，我一直在努力解决此问题。

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

然后我们可以使用let urlElements = window.location.href.split('/')

通过原始Javascript提取部分URL。

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

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

let urlElelement = (urlElements[0])

现在您可以在任意位置使用urlElement的值，该值将是URL的特定部分。

Answer 7

阅读本文，我找到了 React / NextJs 的解决方案。因为如果我们在 react 或 nextjs 中直接使用 window.location.href 会抛出像

这样的错误 <块引用>

服务器错误参考错误：窗口未定义

import React, { useState, useEffect } from "react";
const Product = ({ product }) => {
 const [pageURL, setPageURL] = useState(0);
  useEffect(() => {
    setPageURL(window.location.href);
  })
  return (
     <div>
       <h3>{pageURL}</h3>
      </div>
  );
};

注意： https://medium.com/frontend-digest/why-is-window-not-defined-in-nextjs-44daf7b4604e#:~:text=NextJS%20is%20a%20framework%20that,is%20not%20run%20in%20NodeJS。

Answer 8

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

但是，如果您很想在不访问全局变量的情况下非常想要完整的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，它的实现方式主要是避免不必要地创建新元素。

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

Answer 9

要获取当前路由器实例或当前位置，您必须使用withRouter中的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)

Answer 10

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

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

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

10 个答案: