React redux获取站点基础URL/window.location

Question

希望这是一个非常简单的问题：

我想在我的网站上创建一个包含完整URL的字符串，比如：

https://example.com/documents/1

理想情况下，我希望在mapStateToProps()中的一个react redux connect()-ed容器中生成它。如果页面是使用browserHistory的react路由器Route的孙子（所以也许我可以通过某种方式从react路由器或浏览器History获得它？）如果必要，我会在完整的react类中进行。

但我一辈子都找不到该怎么做。window（与window.location中一样）在mapStateToProps()中始终是undefined（这并不奇怪），在我看来组件的render()功能也是如此。

到目前为止，我只找到了访问当前路线的方法，例如"/documents/1"，这只是一个相对路径，不包含网站的基本url(https://example.com/)

Answer 1

因此，首先，请记住您的代码在客户端和服务器上运行，因此对窗口的任何访问都需要进行检查。

  if (typeof window !== 'undefined') {
    var path = location.protocol + '//' + location.host + '/someting'; // (or whatever)
  } else {
    // work out what you want to do server-side...
  }

如果您生成的URL显示在DOM中，并且在客户端上，您在第一次呈现之前用这个URL填充存储，那么您将得到一个校验和错误。如果真的想避免错误，可以等到根组件中的componentDidMount()来获取/设置url。

Answer 2

componentDidMount之后，您可以直接访问原始位置，以便获得根url。

我一直在我的JSX中使用以下代码，这样我就不必担心根路径，例如：dev-env，它将是localhost:3000/whatever，暂存它将是AppStaging.heroku/whatever/.....，在生产中它将评估为www.myapp.com/whatever

`${window.location.origin.toString()}/whateverRoute/`

Answer 3

你可以试试！！

window.location.origin

Answer 4

您可以尝试URL API。查看此链接以了解更多详细信息https://developer.mozilla.org/en-US/docs/Web/API/URL

const url = new URL("blob:https://mozilla.org:443/")
console.log(url.origin); 
// Logs 'https://mozilla.org'