使用Reaction路由器V4以编程方式导航

Question

使用Reaction路由器V4以编程方式导航

我刚刚换了react-router从第3节到第4节。
的成员函数中如何以编程方式导航。Component..在.handleClick()函数，我想导航到/path/some/where在处理了一些数据之后。我以前是这样做的：

import { browserHistory } from 'react-router'browserHistory.push('/path/some/where')

但我在v4中找不到这样的接口。
如何使用v4导航？

Answer 1

做这件事最简单的方法是：this.props.history.push("/new/url")注：您可能想通过history prop从父组件到组件，如果操作不可用，则调用该操作。

Answer 2

在迁移到Reaction时，我遇到了一个类似的问题-Routerv4，因此我将尝试在下面解释我的解决方案。请不要认为这个答案是解决这个问题的正确方法，我想当ReactiveRoutv4变得更加成熟并离开beta时，很有可能会出现更好的东西(它甚至已经存在，而我只是没有发现它)。就上下文而言，我遇到了这个问题，因为我偶尔使用Redux-Saga以编程方式更改历史对象(例如用户成功身份验证时)。在Reaction路由器文档中，查看<Router>&nbsp;元件你可以看到你有能力通过一个道具传递你自己的历史对象。这就是解决方案的本质-我们提供历史对象到React-Router从全球模块。步骤：安装历史NPM模块-yarn add history&nbsp;或&nbsp;npm install history --save创建一个名为history.js在你的App.js级别文件夹(这是我的首选)//&nbsp;src/history.jsimport&nbsp;createHistory&nbsp;from&nbsp;'history/createBrowserHistory';export&nbsp;default&nbsp;createHistory();`将此历史记录对象添加到您的路由器组件中，如下所示//&nbsp;src/App.jsimport&nbsp;history&nbsp;from&nbsp;'../your/path/to/history.js;'<Router&nbsp;history={history}>//&nbsp;Route&nbsp;tags&nbsp;here</Router>通过导入来调整URL，就像以前一样你的全球历史目标：import&nbsp;history&nbsp;from&nbsp;'../your/path/to/history.js;'history.push('new/path/here/');现在，一切都应该保持同步，您还可以访问一种以编程方式而不是通过组件/容器设置历史对象的方法。