我胡汉三有日子没回来写写文章了,最近一直再忙着将老项目升级,所以没时间来搞文章,今天突然感觉开了挂一样,爱因斯坦附体,把之前的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. 1. 两数之和 Java解法

    这题属于Leetcode的签到题,基本上每个人一进来就是这题. 用哈希思想来做就是最好的解答. 如果一个target - num[i] 存在那么就返回那个数字对应的下标和当前元素的下标. public ...

  2. sealos2.0使用教程,最简单kubernetesHA方案

    kubernetes集群三步安装 概述 本文教你如何用一条命令构建k8s高可用集群且不依赖haproxy和keepalived,也无需ansible.通过内核ipvs对apiserver进行负载均衡, ...

  3. python log 设置

    # -*- coding: utf-8 -*- import loggingfrom logging.handlers import TimedRotatingFileHandler  # 按时间处理 ...

  4. C#:正则表达式类

     Regex r = new Regex("abc"); // 定义一个Regex对象实例(Regex r = new Regex("abc", RegexOp ...

  5. Letters Shop

    B. Letters Shop time limit per test 2 seconds memory limit per test 256 megabytes input standard inp ...

  6. NAS

    NAS, Network Attached Storage, 网络附属存储, 简单来说就是连接在网络上, 可以存储资料的装置.可以用来做私有网盘,同步各种设备的照片.视频.音频和文件. 常见的 NAS ...

  7. Java并发编程实战笔记—— 并发编程4

    1.同步容器类 同步容器类都是线程安全的,但在某些情况下可能需要额外的客户端加锁保护复合操作. 容器上常见的复合操作包括但不限于:迭代(反复访问数据,直到遍历完容器中所有的元素为止).跳转(根据指定顺 ...

  8. linux装OpenOffice后传---中文乱码的解决

    上一篇的博客已经详细的介绍了linux系统上如何安装OpenOffice,安装之后使用发现转换的pdf出现中文乱码.后来发现是linux上没有中文对应的那个字体. 字体准备 在windows上的位置 ...

  9. HomeKit智能球泡

    产品名称: 智能LED灯泡调光调色 接入苹果HomeKit家庭(无需网关).天猫精灵.小爱.小度.Google.ALEXA 产品价格:9.9 本产品是针对HomeKit的产品,没有iphone手机,配 ...

  10. 弹性盒子---CSS3布局方式

    1.弹性盒子/伸缩盒子 如果要使用弹性盒子属性,首先要将父级元素变成弹性盒子 Flex-direction 设置伸缩盒子的内部元素的排列方式 Row    从左到右安行排列 Column  从上到下按 ...