如果你的项目中并没有用到redux,那本文你可以忽略

问题引入

纯粹的单页面react应用中,通过this.props.history.push(‘/list’)就可以进行路由跳转,但是加上了redux后,使用这个语句并不能生效。相信你在做的过程也遇到了此问题,控制台报错了-_-

1
Uncaught TypeError: Cannot read property 'push' of undefined

解决方案

  1. 在将要使用js控制路由的组件中引入withRouter方法;

    大专栏  react项目中引入了redux后js控制路由跳转方案le>
    1
    import { withRouter} from 'react-router-dom';
  2. 导出类的时候运用该方法

    1
    export default withRouter(MailListLeft)
  3. 在MailListLeft组件中正常使用 this.props.history.push(‘/list’)

    1
    <button type="button" onClick={()=>{this.props.history.push("/list");}}>去列表页面</button>

react项目中引入了redux后js控制路由跳转方案的更多相关文章

  1. React-Router JS控制路由跳转

    React-Router JS控制路由跳转 时间: 2016-04-12 15:01:20 作者: zhongxia React-Router 控制路由跳转的方式,目前知道的有两种[Link 链接, ...

  2. 【React踩坑记四】React项目中引入并使用js-xlsx上传插件(结合antdesign的上传组件)

    最近有一个前端上传并解析excel/csv表格数据的需求. 于是在github上找到一个14K star的前端解析插件 github传送门 官方也有,奈何实在太过于浅薄.于是做了以下整理,避免道友们少 ...

  3. 【React踩坑记五】React项目中引入并使用react-ace代码编辑插件(自定义列表提示)

    最近有一个引入sql编辑器插件的需求,要求代码高亮显示,代码智能提示,以及支持自定义代码提示列表等功能.中途在自定义代码提示列表中由于没有相关demo,所以踩了一些坑,遂将其整理如下,以便日后查看. ...

  4. 在 React 项目中引入 GG-Editor 编辑可视化流程

    蚂蚁金服数据可视化团队曾经开源了一款G6-Editor,但后来停止了对外支持,学习成本太高 好在后来他们团队的大牛高力结合 React + G6 开源了一个 GG-Editor(其实就是G6-Edit ...

  5. react 项目中 引入 bootstrap

    react-bootstrap是一个非常受欢迎的针对react封装过的bootstrap,它本身不包含css,所以也是需要使用bootstrap原生库. 在create-react-app建的项目目录 ...

  6. react项目中引入百度地图打包报错问题

    一.我正常引入百度地图,调试时候是好使的,但是打包时候就报错 引入方法如下: 报错如图 正常调试是好使的,但是打包报这个错,解析不了这个BMap,那么怎么办呢? 然后我就转用了window办法,虽然因 ...

  7. react-router JS 控制路由跳转(转载)

    Link组件用于正常的用户点击跳转,但是有时还需要表单跳转.点击按钮跳转等操作.这些情况怎么跟React Router对接呢? 下面是一个表单. <form onSubmit={this.han ...

  8. 如何优雅地在React项目中使用Redux

    前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...

  9. 优雅的在React项目中使用Redux

    概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux react-redux React插件,作用:方便在 ...

随机推荐

  1. Vue.js——4.指令 笔记

    v-cloak:解决网速延迟 闪烁问题v-text=msg: 和{{}}表达式一样,没有闪烁问题,但是前后不能加别的,覆盖原本的内容 innerTextv-html=msg:innerHtml,一样可 ...

  2. 3. laravel 5.5 多子域名 + dingo + jwt 简单环境搭建

    环境介绍 laravel 5.5.* + php 7.2 + mysql 5.7.27 1. 创建 laravel 项目 (自行 配置一下域名 如果 不会 请参考laravel 的第一篇文章) com ...

  3. Java Properties基础知识总结

    在Java语言中,使用一种以.properties为扩展名的文本文件作为资源文件,该类型的文件的内容格式为类似: some_key=some_value #注释描述 还有一种是使用xml文件保存项目的 ...

  4. 将元素平分成差值最小的两个集合(DP)

    现有若干物品,要分成较为平均的两部分,分的规则是这样的: 1)两部分物品的个数最多只能差一个. 2)每部分物品的权值总和必须要尽可能接近. 现在请你编写一个程序,给定现在有的物品的个数以及每个物品的权 ...

  5. UML-逻辑架构和包图-概述

    回顾前几章学习了用例模型,本章开始学习设计模型.

  6. P2P平台爆雷不断到底是谁的过错?

    早在此前,范伟曾经在春晚上留下一句经典台词,"防不胜防啊".而将这句台词用在当下的P2P行业,似乎最合适不过了.就在这个炎热夏季,P2P行业却迎来最冷冽的寒冬. 引发爆雷潮的众多P ...

  7. 富文本编辑器Tinymce的示例和配置

    Demo链接: https://download.csdn.net/download/silverbutter/10557703 有时候需要验证tinyMCE编辑器中的内容是否符合规范(不为空),就需 ...

  8. javascript获取数组最后一个元素(三种方法)

    JavaScript 获取Array末尾元素 一.JavaScript pop() 方法 pop() 方法用于删除并返回数组的最后一个元素. 注意:pop() 方法将删除 arrayObject 的最 ...

  9. UML-词汇表

    样例:

  10. Django的View(视图)-settings源码的解析-模板层-模板语法

    FBV与CBV 视图函数并不只是指函数,也可以是类 FBV:基于函数的视图,类似面向函数式编程 CBV:基于类的视图,类似面向对象编程 研究解析render源码: render:返回html页面:并且 ...