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

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

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

小胖Pro2020/03/12 15:06:41

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

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

Harry小哥2020/03/12 15:06:41

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

十三Tony伽罗2020/03/12 15:06:41

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

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

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

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

神奇小小2020/03/12 15:06:41

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

Eva猿猿2020/03/12 15:06:41

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

注意:不返回完整网址。