在React / JS中打印当前URL

Question

我想在屏幕上打印网址（是的，它是在网址栏中写的，但无论如何我都想这样做）

我可以使用什么？ 在下面的示例中，我可以编写什么而不是{iDontKnowWhatToWriteHere}来提供临时URL？

import React from 'react';

class Connexion extends React.Component {

    render() {
        return (
            <h1> the URL is {iDontKnowWhatToWriteHere} </h1>
        )
    }
}

谢谢

Answer 1

假设您使用React Router，则可以使用

return (
    <h1> the URL is {this.context.location.pathname} </h1>
)

Answer 2

React是一个普通的javascript库，它只关注应用程序的视图，因此它允许您访问所有可用的普通浏览器API和属性，其中一个是位置。

因此，如果你想访问React中的实际url，你应该按照你没有React 的方式进行访问（除非你使用某些特定的库来解决这个问题，比如react-router）< / strong>，只是：

如果您想获取所有网址（包括域名，协议，端口）

window.location.href

或者如果你只想要de domain之后的路径

window.location.pathname

在您的代码中

import React from 'react';

class Connexion extends React.Component {

    render() {
        return (
            <h1> the URL is {window.location.pathname} </h1>
        )
    }
}

Answer 3

您可以使用vanilla JavaScript提供的 window.location 对象获取有关您网址的信息。

供参考，请参阅https://www.w3schools.com/jsref/obj_location.asp

您可以使用window.location.href获取完整的网址。附件是位置对象的屏幕截图（我从Chrome网络控制台获取）

Answer 4

如果您使用的是react-router。尝试：

this.props.location.pathname

此致