使用 react-router 和 redux 容器组件线程化路由参数

Question

希望这是一个简单的问题，我只是在措辞上有困难。 在使用 react-router 之前：

我的应用程序的结构是有一个项目列表，单击一个项目会在我的 redux 商店中设置一个 selected 状态项目。

当一个项目被选中时，应用会渲染一个容器组件。这个组件相当复杂，并且还有其他几个子容器组件，我在其中使用了 getSelectedItem(state) 的选择器。

现在这很好，但是当切换到react-router 时，现在唯一知道selected 值的组件是获得this.props.params.selected 值的最父组件。因为selected 不再存储在状态中，它由路由器管理，我是否有必要将selected 值也传递给所有子容器组件？我现在会在哪里使用像 getItem(state, selected) 这样的选择器或类似的东西。

希望这很清楚，也许我应该一直贯穿这个价值观？不确定那里的最佳实践。谢谢。

Answer 1

您需要将 location/pathname/params 作为 props 显式传递给子组件。

react-router 当前提供context.router，它将帮助您向前和向后导航，但它不会为您提供当前路线的详细信息。在早期版本中，曾经有 context.location 和 context.router.getCurrentRoutes，但它们在 v2.0.0-rc4 中均已弃用。

更改的上下文导出

只有一个名为 router 的对象被添加到上下文中。访问context.history、context.location 和 context.route 已全部弃用。

访问位置

从您的路由组件的this.props.location 访问location。 如果你想让它在树中更深，你可以使用任何 你的应用程序从高到低获取道具的约定。一 选项是自己把它放在上下文中

更多细节请参考v2.0.0-rc4期间完成的react-router changes。