我胡汉三有日子没回来写写文章了,最近一直再忙着将老项目升级,所以没时间来搞文章,今天突然感觉开了挂一样,爱因斯坦附体,把之前的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. 如何在 Centos7 中安装 Mysql 5.7

    一.下载安装包 (1). 下载MySQL源码 (进入/usr/local/src目录,使用wget下载) cd /usr/local/src wget https://dev.mysql.com/ge ...

  2. Office2010安装问题锦集

    问题一,每次打开office 2010,都会出现重新配置的对话框. 解决姿势: 大部分搜索到的解决方法大概有2种, 一个是修改注册表,在注册表中这个这个位置增加一个名为NoRereg的32位World ...

  3. 恢复在iterm2中当滚动光标时候触发滚动历史记录的问题

    在Iterm2中,如果你上下滚动光标(上下滑动触摸板.或者滚动鼠标滚轮),通常情况下是触发了屏幕内容上下滚动. 但是在某些异常情况下,却触发了命令行历史记录的上下滚动,效果和你连续按了多次键盘的上下键 ...

  4. [开源] .NETCore websocket 即时通讯组件---ImCore

    前言 ImCore 是一款 .NETCore 下利用 WebSocket 实现的简易.高性能.集群即时通讯组件,支持点对点通讯.群聊通讯.上线下线事件消息等众多实用性功能. 开源地址:https:// ...

  5. React进阶之路书籍笔记

    React进阶之路: "于复合类型的变量,变量名不指向数据,而是指向数据所在的地址.const命令只是保证变量名指向的地址不变,并不保证该地址的数据不变,所以将一个对象声明为常量必须非常小心 ...

  6. Thinkphp5.0快速入门笔记(1)

    学习来源与说明 https://www.kancloud.cn/thinkphp/thinkphp5_quickstart 测试与部署均在windows10下进行学习. Composer安装和更新 C ...

  7. DesignPattern系列__06迪米特原则

    迪米特原则定义 迪米特原则,也叫最少知道原则,即一个类应该对自己依赖的类知道的越少越好,而你被依赖的类多么复杂,对我都没有关系.也就是说,对于别依赖的类来说,不管业务逻辑多么复杂,都应该尽量封装在类的 ...

  8. python 字符串格式化format

    通过{}和:来代替传统%方式   1.位置参数 位置参数不受顺序约束,且可以为{},只要format里有相对应的参数值即可,参数索引从0开,传入位置参数列表可用*列表 >>> li ...

  9. Guava cache使用总结

    缓存分为本地缓存和远端缓存.常见的远端缓存有Redis,MongoDB:本地缓存一般使用map的方式保存在本地内存中.一般我们在业务中操作缓存,都会操作缓存和数据源两部分.如:put数据时,先插入DB ...

  10. 【0812 | Day 13】闭包函数/装饰器/迭代器

    目录 闭包函数 无参装饰器 有参装饰器 迭代器 闭包函数 一.什么是闭包? 闭包指的是:函数内部函数对外部作用域而非全局作用域的引用. def outter(): x = 1 def inner(): ...