react项目中引入了redux后js控制路由跳转方案
如果你的项目中并没有用到redux,那本文你可以忽略
问题引入
纯粹的单页面react应用中,通过this.props.history.push(‘/list’)就可以进行路由跳转,但是加上了redux后,使用这个语句并不能生效。相信你在做的过程也遇到了此问题,控制台报错了-_-
1 |
Uncaught TypeError: Cannot read property 'push' of undefined |
解决方案
在将要使用js控制路由的组件中引入withRouter方法;
导出类的时候运用该方法
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插件,作用:方便在 ...
随机推荐
- hadoop cmd
一.hadoop文件操作 1.Ls hadoop fs -ls / 2.Put hadoop fs -put xx /path 3.Mkdir hadoop fs -mkdir 4.要从HDFS中删除 ...
- 第二季第六天 part2 css动画
transition:background 2s,width 3s(第二个参数为变化时间) 1s(第三个参数为延迟时间): class:hover {} 伪类,鼠标移上去一个变化 <img ...
- jsp的appilication.getInitParameter()方法无法获取到值的问题
背景介绍 今天研究jsp的内置对象时发现,使用appilication.getInitParameter()从web.xml文件中获取值的时候,死活获取不到,折腾了将近一个小时,后来出现问题的原因却让 ...
- 化 Bernoulli 方程为一阶线性微分方程
形如 $ {\displaystyle \frac{dy}{dx}+p(x)y=q(x)y^n(n\neq 0,1) \ \ \ \ \ (1)}$ 的方程为 Bernoulli 方程.现在我们考虑其 ...
- Vue 源码学习(1)
概述 我在闲暇时间学习了一下 Vue 的源码,有一些心得,现在把它们分享给大家. 这个分享只是 Vue源码系列 的第一篇,主要讲述了如下内容: 寻找入口文件 在打包的过程中 Vue 发生了什么变化 在 ...
- 常用DIV+CSS命名大全集合
一.命名规则说明: - TOP 1).所有的命名最好都小写 2).属性的值一定要用双引号("")括起来,且一定要有值如class="divcss5",i ...
- 黑马程序员IDEA版JAVA基础班\JavaWeb部分视频\2-10Request和Response\第5节 request登录案例
用户登录案例需求: 1.编写login.html登录页面 username & password 两个输入框 2.使用Druid数据库连接池技术,操作mysql,day14数据库中user表 ...
- Problem for Nazar CodeForces - 1151C (前缀和)
Problem for Nazar Nazar, a student of the scientific lyceum of the Kingdom of Kremland, is known for ...
- Java之多线程方式一(继承Thread类)
/** * 多线程的创建,方式一:继承于Thread类 * 1. 创建一个继承于Thread类的子类 * 2. 重写Thread类的run() --> 将此线程执行的操作声明在run()中 * ...
- NOIp2017TG解题报告
NOIp2018RP++! 虽然没去但还得写写QAQ D1T1 : 小凯的疑惑 数学题 手推几组数据然后发现规律 \(Ans = (a-1)(b-1)+1\) AC in 1minite D1T2 : ...