如何通过module.exports暴露React类实例，替代react-router的withRouter？

我知道这个标题可能有点让人摸不着头脑，下面直接说具体的实现思路和逻辑：

我们的核心目标是避免使用react-router中的withRouter高阶组件，转而直接从BrowserRouter的单例组件实例中获取push、pop这类history路由方法。

具体实现步骤很简单：

• 第一步，给你的BrowserRouter组件添加一个ref引用，写法如下：

  <BrowserRouter ref="router" />
  

• 第二步，通过模块导出的方式，把实例上的history方法暴露出去，比如：

  module.exports.push = this.refs.router.push;
  // 按需导出其他需要的方法，比如pop、replace等
  module.exports.pop = this.refs.router.pop;
  

这样一来，其他组件就可以直接导入这些方法来进行路由跳转，完全不需要依赖withRouter来注入路由相关的props了。

内容的提问来源于stack exchange，提问作者Stef van Wijchen