使用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> 元件你可以看到你有能力通过一个道具传递你自己的历史对象。这就是解决方案的本质-我们提供历史对象到React-Router从全球模块。

步骤：

1. 安装历史NPM模块-

   yarn add history 或 npm install history --save

2. 创建一个名为history.js在你的App.js级别文件夹(这是我的首选)

   // src/history.jsimport createHistory from 'history/createBrowserHistory';export default createHistory();`

3. 将此历史记录对象添加到您的路由器组件中，如下所示

   // src/App.jsimport history from '../your/path/to/history.js;'<Router history={history}>// Route tags here</Router>

4. 通过导入来调整URL，就像以前一样你的全球历史目标：

   import history from '../your/path/to/history.js;'history.push('new/path/here/');

现在，一切都应该保持同步，您还可以访问一种以编程方式而不是通过组件/容器设置历史对象的方法。