如何使用 React 上下文来准确获取路由器，并且仅在我需要的地方获取路由器?

Question

我构建了一个最小的示例来演示这个问题。简而言之，如果我想在组件中使用路由器，例如因为它嵌套了Route，那么我需要使用withRouter钻取路由器道具，穿过该组件的每个祖先，即使这些祖先自己不使用路由器。

我认为它与问题#6072有关，但它被标记为已修复。我已经阅读了 react-router 中的"处理更新阻止"文档。

为什么有必要这样做？这意味着我需要保守地为每个组件添加withRouter，因为我无法预测，一般来说，哪些组件会有需要路由器的后代。我认为 React 中的上下文重点是让我摆脱这种情况，这样我就可以准确地在需要的地方拉出路由器，并在两者之间的任何地方忘记它。有没有办法做到这一点？

Answer 1

我相信你正在击中这个：

重要说明：withRouter 不会像 React Redux 的连接那样订阅位置更改状态更改。相反，在位置更改从组件传播出去后，会重新渲染。这意味着 withRouter 不会在路由转换时重新渲染，除非其父组件重新渲染。如果您使用 withRouter 来防止更新被 shouldComponentUpdate 阻止，那么 withRouter 包装实现 shouldComponentUpdate 的组件非常重要。

从： https://reacttraining.com/react-router/web/api/withRouter

所以：如果你不让你的"忽略路由器"组件成为observer，它会起作用。我已经在你的密码箱里试过了。

// from this:
let IgnoresRouter = observer(() => (
<div>
<h1>IgnoresRouter</h1>
<UsesRouter />
</div>
));
// to this:
let IgnoresRouter = () => (
<div>
<h1>IgnoresRouter</h1>
<UsesRouter />
</div>
);

原因：作为观察者，ignoresRouter 组件没有要观察的"依赖项"或值，这意味着：它不会重新渲染。

mobx-react.observer将为您实现 shouldComponentUpdate。(这就是为什么使用 mobx 更容易获得更好的性能(。但现在它正在与你对抗。

如果删除观察器，它将重新渲染，因为mobx-react不再控制渲染(shouldComponentUpdate(。因此，参考文档的引用，现在父级(ignoreRouter(正在重新渲染，因此具有withRouter的子级可以。

现在，既然你使用 mobx，你可能想退后一步，阅读 mobx 作者的这篇优秀的文章，并可能用可以说更好的东西替换 react-router。人们根据以下原则构建了路由器： https://github.com/nareshbhatia/mobx-state-router

我真的无法判断它是否"很棒"，因为我自己没有使用过mobx-state-router，但我根据相同的原理制作了自己的自定义解决方案，所以最后，与 mobx-state-router 非常相似，它就像一个魅力。