如何从组件外部访问路由参数？

Question

如何根据位置计算参数。我正在使用 redux 并重新选择。我曾经在我的一些选择器中访问 router.params 。现在我只能访问 routing.location.

我试图在react-router中找到一个辅助函数，但我没有找到。

感谢您的帮助！

Answer 1

不幸的是，react-router 很难使用。我个人做了以下解决方法：在主路由组件（App）中<Route path="/" component={App} />定义两个方法：

  constructor(props) {
    super(props);
    globalModel.router.set(props);
  }

  componentWillReceiveProps(nextProps) {
    globalModel.router.set(nextProps);
  }

所以我在 globalModel 中有当前的路由器属性（可能是 flux store）。

Answer 2

路由器与 Redux 无关，无法向您提供 state.router.params 之类的东西。

你可能会把它误认为是像 redux-router which you can still use. You probably switched to react-router-redux 这样的社区包之一，它更稳定但故意不让你访问来自状态的路由参数。这两个库都在各自的 README 中解释了它们的差异，因此我鼓励您阅读这两个库并选择更适合您需求的那个。

虽然您不必使用这些库中的任何一个！

一般来说，我们建议您只在路由处理程序组件中使用从路由器本身收到的道具。确保它已连接，然后使用第二个参数 mapStateToProps 读取路由参数：

function mapStateToProps(state, ownProps) {
  const id = ownProps.params.id
  return {
    post: state.posts[id]
  }
}

类似地，当您在选择器本身上定义第二个 props 参数时，您可以使用 Reselect 访问道具。 Reselect 自述文件 describes this use case。从技术上讲，您仍在传递组件中的参数，但您的选择器可以通过这种方式访问它们。

如何从组件外部访问路由参数？

How to access the routing params from outside a component?

javascript

react-router

redux