详解升级react-router 4 踩坑指南


Posted in Javascript onAugust 14, 2017

一.前言

上午把近日用React做的一个新闻项目所依赖的包升级到了最新的版本,其中从react-router(2.8.1)升级到react-router(4.1.2)中出现了很多问题, 故总结一下在升级过程中遇到的问题.

二.react-router,V4版本修改内容

1. 所有组件更改为从react-router-dom导入

之前的所有路由组件均是从react-router中导入,在我之前的项目中,导入相关组件如下:

//v2
import {Router,Route,hashHistory} from 'react-router';

在react-router4 开始,所有的router组件均是从react-router-dom中导入, 所以一下的需要更改为以下代码:

//v4
import {Route,BrowserRouter, Switch} from 'react-router-dom';

细心的你发现在,到导入的过程中,我删除了Router,但是增加了BorwerRouter和Switch,下面我会一步步的说明.

2. 将所有<Router>替换为<BrowserRouter>

之前v2中的代码如下:

//v2
 <Router history={hashHistory}>
  <Route path="/" component={PCIndex}></Route>
  <Route path="/details/:uniqueky" component={PCNewsDetails}></Route>
  <Route path="/usercenter" component={PCUserCenter}></Route>
 </Router>

现在需要更改为BrowserRouter

//v4
<BrowserRouter>
  <Switch>
   <Route exact path="/" component={MobileIndex}></Route>
   <Route path="/details/:uniqueky" component={MobileNewsDetails}></Route>
   <Route path="/usercenter" component={MobileUserCenter}></Route>
  </Switch>
 </BrowserRouter>

细心的你发现,这里的代码不仅仅是将Router替换为BrowserRouter,而且还把所有的Route中用Switch包裹起来. 下面就是v4的另一个修改.

3. <BrowserRouter>只能有一个子节点

<BroserRouter>只能有一个子节点,所以官网建议的是使用<Switch>进行包裹,官网给出的例子如下.

In v3, you could specify a number of child routes, and only the first one that matched would be rendered.

// v3
<Route path='/' component={App}>
 <IndexRoute component={Home} />
 <Route path='about' component={About} />
 <Route path='contact' component={Contact} />
</Route>

v4 provides a similar functionality with the <Switch> component. When a <Switch> is rendered, it will only render the first child <Route> that matches the current location.

// v4
const App = () => (
 <Switch>
  <Route exact path='/' component={Home} />
  <Route path='/about' component={About} />
  <Route path='/contact' component={Contact} />
 </Switch>
)

4. 最坑的地方:在当前目录下的文件路径不再使用./, 而是直接用/.

在进行文件引用的时候 ,./src/js的写法需要更改文'/src/js', 这是更改之后最坑的地方!!! 因为其他的更改,在控制台都会有着详细的错误提示, 然而找不到文件只会出现404!!!
所以,在单页面中的引入的css文件和bundle.js的引入都需要更改, 在我的项目中的例子如下:

//v2
<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./src/css/pc.css" rel="external nofollow" >
    <link rel="stylesheet" href="./src/css/mobile.css" rel="external nofollow" >
  </head>
  <body>
    <div id="mainContainer">
      
    </div>
    <script src="./src/bundle.js"></script>
  </body>
</html>

上面的页面需要更改为下面这样,否则所有的文件都无法找到:

//v4
<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/src/css/pc.css" rel="external nofollow" >
    <link rel="stylesheet" href="/src/css/mobile.css" rel="external nofollow" >
  </head>
  <body>
    <div id="mainContainer">
      
    </div>
    <script src="/src/bundle.js"></script>
  </body>
</html>

三.更多信息

以上就是我在我的项目中所遇到的坑,以及对应的处理办法.总的来说react-router4 rewrite之后变化还是挺大的.

1. 更多React-router v4的修改信息,请看Github:

Migrating from v2/v3 to v4

2. 本文中的项目下载地址:

Github: https://github.com/Lee-Tanghui/React-news-project.git

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
dojo 之基础篇(二)之从服务器读取数据
Mar 24 Javascript
jQuery 获取兄弟元素的几种不错方法
May 23 Javascript
node.js中的buffer.toString方法使用说明
Dec 14 Javascript
js树插件zTree获取所有选中节点数据的方法
Jan 28 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
Apr 15 Javascript
js实现二级菜单渐隐显示
Nov 03 Javascript
百度地图给map添加右键菜单(判断是否为marker)
Mar 04 Javascript
提高Web性能的前端优化技巧总结
Feb 27 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
Dec 06 Javascript
实例讲解vue源码架构
Jan 24 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
Jun 17 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
Apr 22 Javascript
javaScript封装的各种写法
Aug 14 #Javascript
vue教程之toast弹框全局调用示例详解
Aug 24 #Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
Aug 14 #Javascript
jQuery实现手势解锁密码特效
Aug 14 #jQuery
Vue+Element使用富文本编辑器的示例代码
Aug 14 #Javascript
带你快速理解javascript中的事件模型
Aug 14 #Javascript
JS获取子、父、兄节点方法小结
Aug 14 #Javascript
You might like
php下HTTP Response中的Chunked编码实现方法
2008/11/19 PHP
php中使用parse_url()对网址进行解析的实现代码(parse_url详解)
2012/01/03 PHP
php解压文件代码实现php在线解压
2014/02/13 PHP
PHP实现HTML生成PDF文件的方法
2014/11/07 PHP
yii2 modal弹窗之ActiveForm ajax表单异步验证
2016/06/13 PHP
浅谈PHP eval()函数定义和用法
2016/06/21 PHP
PHP注释语法规范与命名规范详解篇
2018/01/21 PHP
thinkPHP框架RBAC实现原理分析
2019/02/01 PHP
ThinkPHP 5.1 跨域配置方法
2019/10/11 PHP
javascript 程序库的比较(一)之DOM功能
2010/04/07 Javascript
jQuery与其它库冲突的解决方法
2010/06/25 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
2013/07/01 Javascript
Javascript 中创建自定义对象的方法汇总
2014/12/04 Javascript
JavaScript操作 url 中 search 部分方法函数
2016/06/15 Javascript
js仿微信公众平台打标签功能
2017/04/08 Javascript
JS实现按钮控制计时开始和停止功能
2017/07/27 Javascript
基于JavaScript实现十五拼图代码实例
2020/04/26 Javascript
JS实现密码框效果
2020/09/10 Javascript
对于Python编程中一些重用与缩减的建议
2015/04/14 Python
Python 实现删除某路径下文件及文件夹的实例讲解
2018/04/24 Python
如何基于Python实现电子邮件的发送
2019/12/16 Python
python GUI库图形界面开发之PyQt5复选框控件QCheckBox详细使用方法与实例
2020/02/28 Python
Python try except异常捕获机制原理解析
2020/04/18 Python
python 实现ping测试延迟的两种方法
2020/12/10 Python
美国学校用品、教室和教学商店:Discount School Supply
2018/04/04 全球购物
三星英国官网:Samsung英国
2018/09/25 全球购物
美国购买隐形眼镜网站:Lenses For Less
2020/07/05 全球购物
List, Set, Map是否继承自Collection接口?
2016/05/16 面试题
利用指针变量实现队列的入队操作
2012/04/07 面试题
四种会话跟踪技术
2015/05/20 面试题
鸿星尔克广告词
2014/03/21 职场文书
审计局2014法制宣传日活动总结
2014/11/01 职场文书
校运会新闻稿
2015/07/17 职场文书
如何设计高效合理的MySQL查询语句
2021/05/26 MySQL
SQL IDENTITY_INSERT作用案例详解
2021/08/23 MySQL
python图像处理 PIL Image操作实例
2022/04/09 Python