我胡汉三有日子没回来写写文章了,最近一直再忙着将老项目升级,所以没时间来搞文章,今天突然感觉开了挂一样,爱因斯坦附体,把之前的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中遇到的问题解决方案以及思路的更多相关文章

  1. 【Unity】近期整理Unity4.x 项目升级Unity5.0 过程中出现的各种常见问题,与大家共享。

    近期整理Unity4.x 项目升级Unity5.0 过程中出现的各种常见问题,与大家共享. 1:Unity4.x 项目中3D模型其材质丢失,成为"白模"?       解决方式:手 ...

  2. nodejs 前端项目编译时内存溢出问题的原因及解决方案

    现象描述 昨天用webpack打包Vue的项目时,node内存溢出而停止build项目,即是项目构建过程中频繁报内存溢出:FATAL ERROR: CALL_AND_RETRY_LAST Alloca ...

  3. [Vue 牛刀小试]:第十六章 - 针对传统后端开发人员的前端项目框架搭建

    一.前言 在之前学习 Vue 基础知识点的文章中,我们还是采用传统的方式,通过在 html 页面上引用 vue.js 这个文件,从而将 Vue 引入到我们的项目开发中.伴随着 Node.js 的出现, ...

  4. 【案例分享】在 React 框架中使用 SpreadJS 纯前端表格控件

    [案例分享]在 React 框架中使用 SpreadJS 纯前端表格控件 本期葡萄城公开课,将由国电联合动力技术有限公司,资深前端开发工程师——李林慧女士,与大家在线分享“在 React 框架中使用 ...

  5. react 前端项目技术选型、开发工具、周边生态

    react 前端项目技术选型.开发工具.周边生态 声明:这不是一篇介绍 React 基础知识的文章,需要熟悉 React 相关知识 主架构:react, react-router, redux, re ...

  6. 如何在前端项目中引用bootstrap less?

    在基于bootstrap css框架的前端项目开发中,如果有grunt build系统,那么工作流是:客制化less,在less中定义自己的 CSS,同时可以随意引用bootstrap中预定义好的cs ...

  7. 前端项目中gulp的使用

    在公司项目开发中,有一个前端项目,我们使用gulp来生成目标文件(css,js,html文件) 进入到这个项目目录中  C:\My Project\FrontEnd\TestBuilder 然后依次运 ...

  8. 前端项目中使用jsencrypt进行字段加密

    前端项目中使用jsencrypt进行字段加密. 使用步骤:①获取公钥②实例化对象③设置公钥④将所需数据进行加密然后返回. 进行一个简单的封装如下 /** * npm install jsencrypt ...

  9. 将arcEngine9.3和dev9.2.4开发的项目升级成arcObject10.2和dev15.1.3过程中遇到的问题和解决

    好久没碰.net了,arcgis更是感觉都忘干净了,今天将arcEngine9.3和dev9.2.4开发的一个项目升级成arcObject10.2和dev15.1.3过程中遇到了一系问题,留个笔记,留 ...

随机推荐

  1. 《Scalable IO in Java》译文

    <Scalable IO in Java> 是java.util.concurrent包的作者,大师Doug Lea关于分析与构建可伸缩的高性能IO服务的一篇经典文章,在文章中Doug L ...

  2. 基于SpringBoot从零构建博客网站 - 新增创建、修改、删除专栏功能

    守望博客是支持创建专栏的功能,即可以将一系列相关的文章归档到专栏中,方便用户管理和查阅文章.这里主要讲解专栏的创建.修改和删除功能,至于专栏还涉及其它的功能,例如关注专栏等后续会穿插着介绍. 1.创建 ...

  3. el-upload自定义上传文件,并携带其余参数,且action不报错

    用el-upload组件自定义上传按钮,并携带其余参数,且必传参数action 不报错 <template> <el-col :span="6" :mode=&q ...

  4. css清除select默认的样式

    select在firefox与chrome的显示是不一样的,我们一般选择通过css清除掉css的默认样式,然后再增添自定义的样式来解决,css我们一般用这么几行代码来清除默认样式: 1 select ...

  5. tab切换echarts无法正常显示问题

    项目中使用到了Echarts来在展示图表,两个tab切换页面中都存在图表,页面加载完成后 对所有图表进行了初始化和绘制,然后切换查看时,发现图表的宽度不正确.,第一个tab显示是很正常的,但是第二个t ...

  6. oracle的JDBC连接

    package com.xian.jdbc; import java.sql.Connection; import java.sql.DriverManager; import java.sql.Pr ...

  7. 新IT运维时代 | Docker运维之最佳实践-下篇

    上篇针对操作系统.主机配置.容器镜像.容器运行时四大方面分享一些Docker的运维经验,本篇将着重在Docker Daemon参数和权限两个方面进一步分享.(阅读上篇请点击右侧:新IT运维时代 | D ...

  8. 基于SpringBoot从零构建博客网站 - 集成editor.md开发发布文章功能

    发布文章功能里面最重要的就是需要集成富文本编辑器,目前富文本编辑器有很多,例如ueditor,CKEditor.editor.md等.这里守望博客里面是集成的editor.md,因为editor.md ...

  9. Spring的数据库编程浅入浅出——不吹牛逼不装逼

    Spring的数据库编程浅入浅出——不吹牛逼不装逼 前言 上文书我写了Spring的核心部分控制反转和依赖注入,后来又衔接了注解,在这后面本来是应该写Spring AOP的,但我觉得对于初学者来说,这 ...

  10. template.demo.js

    <!DOCTYPE html><html><head> <title>index</title> <meta charset=&quo ...