为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

守着一只汪 2019-08-02 11:02:08
使用Reaction路由器V4以编程方式导航我刚刚换了react-router从第3节到第4节。的成员函数中如何以编程方式导航。Component..在.handleClick()函数,我想导航到/path/some/where在处理了一些数据之后。我以前是这样做的:import { browserHistory } from 'react-router'browserHistory.push('/path/some/where')但我在v4中找不到这样的接口。如何使用v4导航?
查看完整描述

3 回答

?
蝴蝶刀刀

TA贡献1801条经验 获得超8个赞

做这件事最简单的方法是:

this.props.history.push("/new/url")

注:

  • 您可能想通过

    history prop

    从父组件到组件,如果操作不可用,则调用该操作。



查看完整回答
反对 回复 2019-08-03
?
白衣非少年

TA贡献1155条经验 获得超0个赞

在迁移到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/');

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



查看完整回答
反对 回复 2019-08-03
  • 3 回答
  • 0 关注
  • 553 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信