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插件,作用:方便在 ...
随机推荐
- HDU - 1251 字典树模板题
Ignatius最近遇到一个难题,老师交给他很多单词(只有小写字母组成,不会有重复的单词出现),现在老师要他统计出以某个字符串为前缀的单词数量(单词本身也是自己的前缀). Input输入数据的第一部 ...
- ZJNU 1365 - Window--中级
每次都寻找长度为k的区间内的最小值显然很容易超出时间限制 所以可以把窗户看作一个数量固定的队列 每次观察入列与出列的元素对答案贡献如何,以更新答案 /* Written By StelaYuri */ ...
- aop 实现原理
aop 底层采用代理机制实现 接口 + 实现类 :spring 采用 jdk 的 动态代理 只有实现类:spring 采用 cglib 字节码增强 aop专业术语 1.target(目标) 需要被代理 ...
- UEFI boot: how does that actually work, then?
原文地址:https://www.happyassassin.net/2014/01/25/uefi-boot-how-does-that-actually-work-then/ 翻译:https:/ ...
- CSS公共样式模版
CSS文件命名为global.css,一般此CSS文件是用于装全站主要框架CSS样式代码和初始化的CSS样式. 通常会放初始化CSS代码如下: body, div, ul, ol, dl, dt, d ...
- Windows 常用配置 - 启用长路径
Windows 启用长路径支持 打开注册表编辑器:regedit 找到如下路径:HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\FileSyte ...
- Servlet&JSP复习笔记 02
1.Servlet获取请求参数 获取请求参数依靠的是表单元素的name属性,广泛意义来说id属性是给客户端使用的,name属性是服务器使用的. a.获取Name-Value的方法: - getPara ...
- 流程控制 if-while-for -语句
if 语句是用来判断条件的真假,是否成立,如果为ture就执行,为flase则跳过 1.python用缩进表示代码的归属 2.同一缩进的代码,称之为代码块,默认缩进4个 if 语句结构 ...
- Python文件基本操作及上下文管理
文件基本操作 打开文件:f = open(fole_name,mode = 'r'),传入表示文件路径的字符串,会返回一个文件对象,mode是文件打开模式. 关闭文件:f.close(),调用给定文件 ...
- spring自带的定时任务功能,基于注解和xml配置
1.spring的配置文件 <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi=&quo ...