我胡汉三有日子没回来写写文章了,最近一直再忙着将老项目升级,所以没时间来搞文章,今天突然感觉开了挂一样,爱因斯坦附体,把之前的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. .NET Core CSharp初级篇 类的生命历程

    .NET Core CSharp初级篇 1-7 本节内容为类的生命周期 引言 对象究竟是一个什么东西?对于许多初学者而言,对象都是一个非常抽象的知识点.如果非要用一句话描述,我觉得"万物皆对 ...

  2. IntegerCache的妙用和陷阱

    转载自IntegerCache的妙用和陷阱 考虑下面的小程序,你认为会输出为什么结果? public class Test {     public static void main(String[] ...

  3. 微信小程序 「柒留言」 — 实现微信公众号留言功能(限时免费入驻,建议收藏)

    「柒留言」小程序留言助手使用指南(接近原生界面) 前言 从去年 3 月以后新公众号就没得留言功能了,新申请的微信公众号没有留言功能,没有留言就无法跟读者进行互动,写出去的文章得不到反馈,着实感觉有蛮难 ...

  4. GDB 基本用法

    1.编译文件时需要加上 -g 选项,并非是将源码嵌入可执行文件,只是加入源代码的信息.eg:gcc -g main.c -o main 2.直接按回车键会重复上一条命令 3.基本指令 help,可以查 ...

  5. Linux基础用户管理

    一.用户管理 (一).用户和组的基本概念 Users and groups:. Every process (running program) on the system runs as a part ...

  6. 夯实Java基础(十)——抽象类和接口

    转载自:http://cmsblogs.com/ 该博主的网站上干货非常!非常!非常多(说三遍),强烈推荐大家前去学习. 接口和内部类为我们提供了一种将接口与实现分离的更加结构化的方法 抽象类与接口是 ...

  7. MySQL数据库基本知识(理论总结)

    定义:数据库就是一个文件系统,通过sql语句来获取数据 关系型数据库:关系型数据库存放的是实体时间的关系,在数据库层面来看就是存放的是表和表之间的关联关系 常见的关系型数据库   MySQL    D ...

  8. UnityShader之积雪效果

    积雪效果是比较简单的,只需要计算顶点法线方向和世界向上方向之间的点乘,将得到的值与预设的阀值比较,小于阀值为0,用这个值进行插值就OK了 代码: Shader "MyShader/SnowS ...

  9. JavaWeb——使用会话维持状态3

    这次的例子是使用会话给上一个例子添加登陆功能 1.页面逻辑 首先是登陆页面,这里需要输入账号和密码,输入正确后将进入商品列表页面,输入错误将会提示账号或者密码错误 其次是商品列表和购物车页面,添加了注 ...

  10. android ——ListView

    谷歌官方文档的介绍:https://developer.android.com/reference/android/widget/ListView.html 显示可垂直滚动的视图集合,其中每个视图都立 ...