前端项目升级到React-router5中遇到的问题解决方案以及思路
我胡汉三有日子没回来写写文章了,最近一直再忙着将老项目升级,所以没时间来搞文章,今天突然感觉开了挂一样,爱因斯坦附体,把之前的bug都搞定了,在这里特意把升级中遇到的问题,记录下来,算是把这个坑填上。

场景:react-router2.2.4 ---> 5.0.1
主要发生了两个问题:
1.路由跳转之前用了browserHistory.push() 抛错:Cannot read property 'push' of undefined
2.react-router中的Link组件 抛错:type is invalid
问题一的解决与思考:
解决方案:使用this.props.history.push()
出现原因:react-router5.0.1已经不存在browserHistory这个对象
解决思路:1.当抛出错误后,打了debugger,结果:发现browserHistory是undefined
2.将 import {browserHistory} from 'react-router' 改为 import * as Rtest from 'react-router',并在后面打印出Rtest,结果:发现Rtest 中并没有browserHistory对象
在此已经怀疑是版本问题,因为给react-router升级到了5.0.1
3.翻看之前的版本(2.2.4),发现存在browserHistory,确定问题:问题为react-router版本升级导致之前的写法出现错误
问题二的解决与思考
解决方案:从react-router-dom中引入,inport {Link} from 'react-router-dom'
出现原因:Link组件被从react-router移动到了react-router-dom中
解决思路:1.找到Link组件,发现Link组件的使用没问题,看了抛错,结果:Link组件不存在
2.本想直接删除掉Link组件,自己手动实现一个,后查了一下发现Link组件被移入了react-router-dom中。
总结:看了一下,react-router后来的版本和之前的版本区别还是蛮大的,升级的话,基本上大部分地方都需要动一动,但是改起来还是很便捷的。
好了,今天就记录到这。我胡汉三看文档去了,告辞!

前端项目升级到React-router5中遇到的问题解决方案以及思路的更多相关文章
- 【Unity】近期整理Unity4.x 项目升级Unity5.0 过程中出现的各种常见问题,与大家共享。
近期整理Unity4.x 项目升级Unity5.0 过程中出现的各种常见问题,与大家共享. 1:Unity4.x 项目中3D模型其材质丢失,成为"白模"? 解决方式:手 ...
- nodejs 前端项目编译时内存溢出问题的原因及解决方案
现象描述 昨天用webpack打包Vue的项目时,node内存溢出而停止build项目,即是项目构建过程中频繁报内存溢出:FATAL ERROR: CALL_AND_RETRY_LAST Alloca ...
- [Vue 牛刀小试]:第十六章 - 针对传统后端开发人员的前端项目框架搭建
一.前言 在之前学习 Vue 基础知识点的文章中,我们还是采用传统的方式,通过在 html 页面上引用 vue.js 这个文件,从而将 Vue 引入到我们的项目开发中.伴随着 Node.js 的出现, ...
- 【案例分享】在 React 框架中使用 SpreadJS 纯前端表格控件
[案例分享]在 React 框架中使用 SpreadJS 纯前端表格控件 本期葡萄城公开课,将由国电联合动力技术有限公司,资深前端开发工程师——李林慧女士,与大家在线分享“在 React 框架中使用 ...
- react 前端项目技术选型、开发工具、周边生态
react 前端项目技术选型.开发工具.周边生态 声明:这不是一篇介绍 React 基础知识的文章,需要熟悉 React 相关知识 主架构:react, react-router, redux, re ...
- 如何在前端项目中引用bootstrap less?
在基于bootstrap css框架的前端项目开发中,如果有grunt build系统,那么工作流是:客制化less,在less中定义自己的 CSS,同时可以随意引用bootstrap中预定义好的cs ...
- 前端项目中gulp的使用
在公司项目开发中,有一个前端项目,我们使用gulp来生成目标文件(css,js,html文件) 进入到这个项目目录中 C:\My Project\FrontEnd\TestBuilder 然后依次运 ...
- 前端项目中使用jsencrypt进行字段加密
前端项目中使用jsencrypt进行字段加密. 使用步骤:①获取公钥②实例化对象③设置公钥④将所需数据进行加密然后返回. 进行一个简单的封装如下 /** * npm install jsencrypt ...
- 将arcEngine9.3和dev9.2.4开发的项目升级成arcObject10.2和dev15.1.3过程中遇到的问题和解决
好久没碰.net了,arcgis更是感觉都忘干净了,今天将arcEngine9.3和dev9.2.4开发的一个项目升级成arcObject10.2和dev15.1.3过程中遇到了一系问题,留个笔记,留 ...
随机推荐
- 小白学python-day08-文件及其操作、字符串字典类型转换
今天是day08,以下是学习总结: 但行努力,莫问前程. ----------------------------------------------------------------------- ...
- CTF杂项题解题思路
下载压缩包解压 如果是图片就先查看图片信息 没有有用信息查看图片看是否是一个图片 如果不是图片就将文件进行还原 从还原文件中查找有用信息 例:这是一张单纯的图片 http://123.206.87.2 ...
- Chrome浏览器F12开发者工具简单使用
1.如何调出开发者工具 按F12调出 右键检查(或快捷键Ctrl+Shift+i)调出 2.开发者工具初步介绍 chrome开发者工具最常用的四个功能模块:元素(ELements).控制台(Conso ...
- .net core 实现基于 cron 表达式的任务调度
.net core 实现基于 cron 表达式的任务调度 Intro 上次我们实现了一个简单的基于 Timer 的定时任务,详细信息可以看这篇文章. 但是使用过程中慢慢发现这种方式可能并不太合适,有些 ...
- ceph 初始化函数解析
global_pre_init 预初始化函数,解析ceph.conf配置文件, 初始化定义global_context 和 config的全局变量. 全局预初始化函数 CINIT_FLAG_UNPRI ...
- jquery EasyUi 添加节点、展开所有节点、默认选中第一个节点
感觉easyUi 的树用起来不如 Ext 的树方便,首先,root节点不太好自定义, 异步加载时,只能通过后台判断生成root节点,但是这样一来有一个问题,就是第一次访问界面时, 树的初始化比较慢,大 ...
- zookeeper中的分布式一致性协议
1. zookeeper中的一致性协议-ZAB协议 在深入了解ZK之前,相信很多同学都会认为ZK就是Paxos算法的一个实现.但事实上,ZK并没有完全采用Paxos算法,而是使用了一种称为ZooKee ...
- C++基础之:扫雷破解
版权声明: 本文原创发布于博客园"优梦创客"的博客空间(网址:http://www.cnblogs.com/raymondking123/)以及微信公众号"优梦创客&qu ...
- 【POJ - 3280】Cheapest Palindrome(区间dp)
Cheapest Palindrome 直接翻译了 Descriptions 给定一个字符串S,字符串S的长度为M(M≤2000),字符串S所含有的字符的种类的数量为N(N≤26),然后给定这N种字符 ...
- 搭建Springboot网站有感
最近心血来潮,搭建了个人网站,一方面想学习下新的知识,另一方面也想有个作品,在这分享下自己的体会,先不说知识点. 建站容易吗,因人而异,而我在完成这个最最简单的工作时起码经历了3个阶段不同的心理变化, ...