详解升级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 相关文章推荐
IE不支持getElementsByClassName最终完美解决方案
Dec 17 Javascript
浅析document.ready和window.onload的区别讲解
Dec 18 Javascript
一个不错的字符串转码解码函数(自写)
Jul 31 Javascript
javascript针对cookie的基本操作实例详解
Nov 30 Javascript
javascript弹出带文字信息的提示框效果
Jul 19 Javascript
学习Javascript闭包(Closure)知识
Aug 07 Javascript
关于ES6的六个小特性(二)
Feb 20 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
Feb 11 Javascript
JS实现简单的抽奖转盘效果示例
Feb 16 Javascript
基于layui轮播图满屏是高度自适应的解决方法
Sep 16 Javascript
js脚本中执行java后台代码方法解析
Oct 11 Javascript
js实现课堂随机点名系统
Nov 21 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 flush类输出缓冲剖析
2008/10/19 PHP
PHP编码转换函数 自动转换字符集支持数组转换
2012/12/16 PHP
解析dedecms空间迁移步骤详解
2013/05/15 PHP
PHP内存使用情况如何获取
2015/10/10 PHP
PHP Include文件实例讲解
2019/02/15 PHP
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
2011/03/17 Javascript
精通Javascript系列之数值计算
2011/06/07 Javascript
浅析JQuery获取和设置Select选项的常用方法总结
2013/07/04 Javascript
jquery实现图片灯箱明暗的遮罩效果
2013/11/15 Javascript
javascript进行四舍五入方法汇总
2014/12/16 Javascript
jQuery使用each方法与for语句遍历数组示例
2016/06/16 Javascript
vue-router 导航钩子的具体使用方法
2017/08/31 Javascript
js 获取json数组里面数组的长度实例
2017/10/31 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
2019/06/19 Javascript
记录vue做微信自定义分享的一些问题
2019/09/12 Javascript
纯JS开发baguetteBox.js响应式画廊插件
2020/06/28 Javascript
vue+axios全局添加请求头和参数操作
2020/07/24 Javascript
videocapture库制作python视频高速传输程序
2013/12/23 Python
python使用smtplib模块通过gmail实现邮件发送的方法
2015/05/08 Python
详解Python的Django框架中的Cookie相关处理
2015/07/22 Python
django2用iframe标签完成网页内嵌播放b站视频功能
2018/06/20 Python
pycharm远程linux开发和调试代码的方法
2018/07/17 Python
Python判断一个list中是否包含另一个list全部元素的方法分析
2018/12/24 Python
彻底理解Python中的yield关键字
2019/04/01 Python
python使用Plotly绘图工具绘制水平条形图
2020/03/25 Python
Python使用POP3和SMTP协议收发邮件的示例代码
2019/04/16 Python
python快速排序的实现及运行时间比较
2019/11/22 Python
通过python检测字符串的字母
2020/02/18 Python
关于python中的xpath解析定位
2020/03/06 Python
在Pycharm中安装Pandas库方法(简单易懂)
2021/02/20 Python
css3.0新属性效果在ie下的解决方案
2010/05/10 HTML / CSS
CSS3+JavaScript实现炫酷呼吸效果的示例代码
2020/06/15 HTML / CSS
本科毕业生自我鉴定
2013/11/02 职场文书
纪念建党演讲稿范文
2014/01/13 职场文书
简短的人生哲理(38句)
2019/08/13 职场文书
PC版《死亡搁浅导剪版》现已发售 展开全新的探险
2022/04/03 其他游戏