详解升级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 相关文章推荐
代码生成器 document.write()
Apr 15 Javascript
jquery中的过滤操作详细解析
Dec 02 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
May 29 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
Sep 06 Javascript
理解javascript模块化
Mar 28 Javascript
JavaScript动态生成二维码图片
Apr 20 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
Sep 28 Javascript
vuejs父子组件之间数据交互详解
Aug 09 Javascript
从源码里了解vue中的nextTick的使用
Nov 22 Javascript
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
Fetch超时设置与终止请求详解
May 18 Javascript
Vue实现可移动水平时间轴
Jun 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
Oracle Faq(Oracle的版本)
2006/10/09 PHP
整合了前面的PHP数据库连接类~~做成一个分页类!
2006/11/25 PHP
用PHP与XML联手进行网站编程代码实例
2008/07/10 PHP
php smarty截取中文字符乱码问题?gb2312/utf-8
2011/11/07 PHP
基于php中使用excel的简单介绍
2013/08/02 PHP
使用php语句将数据库*.sql文件导入数据库
2014/05/05 PHP
PHP模板解析类实例
2015/07/09 PHP
PHP判断是否微信访问的方法示例
2019/03/27 PHP
javascript RadioButtonList获取选中值
2009/04/09 Javascript
FileUpload 控件 禁止手动输入或粘贴的实现代码
2010/04/07 Javascript
判断滚动条到底部的JS代码
2013/11/04 Javascript
原生js和jQuery随意改变div属性style的名称和值
2014/10/22 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
2016/01/21 Javascript
微信小程序 canvas API详解及实例代码
2016/10/08 Javascript
用js制作淘宝放大镜效果
2020/10/28 Javascript
JS实现最简单的冒泡排序算法
2017/02/15 Javascript
Bootstrap如何激活导航状态
2017/03/22 Javascript
详解Angular中的自定义服务Service、Provider以及Factory
2017/04/22 Javascript
深入理解Webpack 中路径的配置
2017/06/17 Javascript
详解vue2.0 transition 多个元素嵌套使用过渡
2017/06/19 Javascript
AngularJS 最常用的八种功能(基础知识)
2017/06/26 Javascript
使用vue + less 实现简单换肤功能的示例
2018/02/21 Javascript
JS返回页面时自动回滚到历史浏览位置
2018/09/26 Javascript
JavaScript创建对象的四种常用模式实例分析
2019/01/11 Javascript
微信小程序与webview交互实现支付功能
2019/06/07 Javascript
Vue 自定义指令功能完整实例
2019/09/17 Javascript
vue指令v-html使用过滤器filters功能实例
2019/10/25 Javascript
flexible.js实现移动端rem适配方案
2020/04/07 Javascript
python实现的简单RPG游戏流程实例
2015/06/28 Python
Python实现控制台中的进度条功能代码
2017/12/22 Python
基于python检查矩阵计算结果
2020/05/21 Python
法国奢华女性时尚配饰网上商店:Monnier Frères
2016/08/27 全球购物
群众路线教育党课主持词
2014/04/01 职场文书
北京导游词
2015/02/12 职场文书
周末问候语大全
2015/11/10 职场文书
2017年寒假少先队活动总结
2016/04/06 职场文书