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

【问题标题】：React-redux get site base URL / window.locationReact-redux 获取站点基础 URL/window.location
【发布时间】：2016-11-24 08:34:54
【问题描述】：

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

我想创建一个字符串，其中包含我网站上某个页面的完整 URL，例如：

https://example.com/documents/1

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

但我终其一生都无法弄清楚如何做到这一点。 window（如window.location）在mapStateToProps()（这并不奇怪）中总是undefined，在我看来组件的render()函数。

到目前为止，我只找到了访问当前路线的方法，例如“/documents/1”，它只是一个相对路径，不包含站点基本url（https://example.com/）

【问题讨论】：

你需要在服务器上创建这个强大的，还是只是在客户端？
就在客户端。

标签： reactjs react-router react-redux

【解决方案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() 获取/设置网址。

【讨论】：

谢谢，在 componentDidMount 中阅读 window.location 有效。我从应用程序的顶级组件中执行此操作并将其保存在状态中。我可以问a）为什么您建议在服务器端进行 - 这样服务器端渲染也可以工作吗？ b）您建议如何/在哪里存储服务器端的 url，以便客户端代码可以读取它？
@skypecakes 现在我已经考虑过了，是的，没有充分的理由将它放在服务器上，所以我已经从我的回答中删除了该评论。
正是我要找的东西

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

你可以试试！！

window.location.origin

【讨论】：