react项目中引入了redux后js控制路由跳转方案
如果你的项目中并没有用到redux,那本文你可以忽略
问题引入
纯粹的单页面react应用中,通过this.props.history.push(‘/list’)就可以进行路由跳转,但是加上了redux后,使用这个语句并不能生效。相信你在做的过程也遇到了此问题,控制台报错了-_-
1 |
Uncaught TypeError: Cannot read property 'push' of undefined |
解决方案
在将要使用js控制路由的组件中引入withRouter方法;
大专栏 react项目中引入了redux后js控制路由跳转方案le>
1
import { withRouter} from 'react-router-dom';导出类的时候运用该方法
1
export default withRouter(MailListLeft)
在MailListLeft组件中正常使用 this.props.history.push(‘/list’)
1
<button type="button" onClick={()=>{this.props.history.push("/list");}}>去列表页面</button>
react项目中引入了redux后js控制路由跳转方案的更多相关文章
- React-Router JS控制路由跳转
React-Router JS控制路由跳转 时间: 2016-04-12 15:01:20 作者: zhongxia React-Router 控制路由跳转的方式,目前知道的有两种[Link 链接, ...
- 【React踩坑记四】React项目中引入并使用js-xlsx上传插件(结合antdesign的上传组件)
最近有一个前端上传并解析excel/csv表格数据的需求. 于是在github上找到一个14K star的前端解析插件 github传送门 官方也有,奈何实在太过于浅薄.于是做了以下整理,避免道友们少 ...
- 【React踩坑记五】React项目中引入并使用react-ace代码编辑插件(自定义列表提示)
最近有一个引入sql编辑器插件的需求,要求代码高亮显示,代码智能提示,以及支持自定义代码提示列表等功能.中途在自定义代码提示列表中由于没有相关demo,所以踩了一些坑,遂将其整理如下,以便日后查看. ...
- 在 React 项目中引入 GG-Editor 编辑可视化流程
蚂蚁金服数据可视化团队曾经开源了一款G6-Editor,但后来停止了对外支持,学习成本太高 好在后来他们团队的大牛高力结合 React + G6 开源了一个 GG-Editor(其实就是G6-Edit ...
- react 项目中 引入 bootstrap
react-bootstrap是一个非常受欢迎的针对react封装过的bootstrap,它本身不包含css,所以也是需要使用bootstrap原生库. 在create-react-app建的项目目录 ...
- react项目中引入百度地图打包报错问题
一.我正常引入百度地图,调试时候是好使的,但是打包时候就报错 引入方法如下: 报错如图 正常调试是好使的,但是打包报这个错,解析不了这个BMap,那么怎么办呢? 然后我就转用了window办法,虽然因 ...
- react-router JS 控制路由跳转(转载)
Link组件用于正常的用户点击跳转,但是有时还需要表单跳转.点击按钮跳转等操作.这些情况怎么跟React Router对接呢? 下面是一个表单. <form onSubmit={this.han ...
- 如何优雅地在React项目中使用Redux
前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...
- 优雅的在React项目中使用Redux
概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux react-redux React插件,作用:方便在 ...
随机推荐
- [LuoguP3978](https://www.luogu.org/problem/P3978) BZOJ4001概率论
BZOJ 4001 概率论 设\(f_i\)表示i个点的二叉树方案数 立刻有\(f_n = \sum_{i=0}^{n-1} f_i f_{n-i-1}\) 设\(F(x)为序列f的生成函数,有F(x ...
- HDU 2544 最短路 【Dijkstra模板题】
传送门:http://acm.hdu.edu.cn/showproblem.php?pid=2544 思路:最短路的模板题 Dijkstra 算法是一种类似于贪心的算法,步骤如下: 1.当到一个点时, ...
- iTOP-4412-Ubuntu系统源码-ubuntu没有声音的解决办法
准备工作 1.下载 vim 在命令行上输入 apt-get install vim 下载 vim 2.输入 vim /etc/hosts 在所打开界面的第一行最后写上 iTOP4412-ubuntu- ...
- 翻译——2_Linear Regression and Support Vector Regression
续上篇 1_Project Overview, Data Wrangling and Exploratory Analysis 使用不同的机器学习方法进行预测 线性回归 在这本笔记本中,将训练一个线性 ...
- c语言中常用的串运算
调用标准库函数 #include<string.h> 串比较,strcmp(char s1,char s2) 串复制,strcpy(char to,char from) 串连接,strca ...
- win32概述
win32基于已有的框架 有意入口函数只有一个 都需要有一个主函数 所有程序的入口都是maincrtstartup tydedef 顾名思义 window是基于c,c++ 又想有自己所特有的数据类型 ...
- C++ 静态成员变量、成员函数
1.每个变量,都有自己的属性. 2.用 static 定义的成员变量.成员函数 ,是属于所有变量的. 3.关键字 static 可以用于说明一个类的成员. 4.把一个类的成员说明为 static 时, ...
- 测试mvn -v 时报错,原因
当安装完maven后在cmd命令框通过mvn -v 可以判断maven环境变量是否安装成功,但我安装配置完环境变量后执行报错如图 原因:配置的jdk的环境变量不符合maven最低要求(我配置的是jdk ...
- JS事件高级
1. 注册事件(绑定事件) 1.1注册事件概述 1.2 addEventListener 事件监听方式 1.3 attachEvent 事件监听方式 1.4 注册事件兼容性解决方案 2. 删除事件(解 ...
- Java常用的公共方法
--获取规字符串中的指定名称的某个字段值 1.public String getValueByName(String params,String name) --用于通过表单选中的复选框获取它的值(j ...