详解升级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 相关文章推荐
accesskey 提交
Jun 26 Javascript
关于window.pageYOffset和document.documentElement.scrollTop
Apr 05 Javascript
jQuery图片的展开和收缩实现代码
Apr 16 Javascript
浅析js中取绝对值的2种方法
Jul 09 Javascript
javascript的回调函数应用示例
Feb 20 Javascript
jquery跟随屏幕滚动效果的实现代码
Apr 13 Javascript
ionic中列表项增加和删除的实现方法
Jan 22 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
Apr 19 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
Jul 25 Javascript
解决webpack无法通过IP地址访问localhost的问题
Feb 22 Javascript
微信小程序基础教程之worker线程的使用方法
Jul 15 Javascript
Node.js API详解之 querystring用法实例分析
Apr 29 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中删除变量时unset()和null的区别分析
2011/01/27 PHP
PHP投票系统防刷票判断流程分析
2012/02/04 PHP
三个类概括PHP的五种设计模式
2012/09/05 PHP
PHP获取客户端真实IP地址的5种情况分析和实现代码
2014/07/08 PHP
destoon调用企业会员公司形象图片的实现方法
2014/08/21 PHP
php实现的Cookies操作类实例
2014/09/24 PHP
thinkPHP5框架设置404、403等http状态页面的方法
2018/06/05 PHP
[原创]PHP global全局变量经典应用与注意事项分析【附$GLOBALS用法对比】
2019/07/12 PHP
PHP SESSION跨页面传递失败解决方案
2020/12/11 PHP
js弹窗代码 可以指定弹出间隔
2010/07/03 Javascript
jQuery输入城市查看地图使用介绍
2013/05/08 Javascript
jQuery窗口、文档、网页各种高度的精确理解
2014/07/02 Javascript
详解js跨域原理以及2种解决方案
2015/12/09 Javascript
学习javascript面向对象 理解javascript对象
2016/01/04 Javascript
Angularjs 滚动加载更多数据
2016/03/17 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
2016/06/02 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
2020/05/29 Javascript
JavaScript点击按钮生成4位随机验证码
2021/01/28 Javascript
[57:18]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#3VP VS VG
2016/03/03 DOTA
[01:31:03]DOTA2完美盛典全回顾 见证十五项大奖花落谁家
2017/11/28 DOTA
Python实现曲线拟合操作示例【基于numpy,scipy,matplotlib库】
2018/07/12 Python
python使用matplotlib画饼状图
2018/09/25 Python
对Python信号处理模块signal详解
2019/01/09 Python
Python使用Shelve保存对象方法总结
2019/01/28 Python
python高阶函数map()和reduce()实例解析
2020/03/16 Python
关于Python解包知识点总结
2020/05/05 Python
浅谈django channels 路由误导
2020/05/28 Python
关于前端上传文件全面基础扫盲贴(入门)
2019/08/01 HTML / CSS
AmazeUI 导航条的实现示例
2020/08/14 HTML / CSS
MAC Cosmetics官方网站:魅可专业艺术彩妆
2019/04/10 全球购物
销售职业生涯规划范文
2014/03/14 职场文书
预备党员综合考察材料
2014/05/31 职场文书
法制演讲稿
2014/09/10 职场文书
个人公司授权委托书范本
2014/10/12 职场文书
2019财务转正述职报告
2019/06/27 职场文书
JDK8中String的intern()方法实例详细解读
2022/09/23 Java/Android