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

前端之家收集整理的这篇文章主要介绍了详解升级react-router 4 踩坑指南前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

@H_4030@

一.前言


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


@H_403_0@

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


@H_4030@

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


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


<div class="jb51code">
<pre class="brush:js;">
//v2
import {Router,Route,hashHistory} from 'react-router';

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

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

@H_403_0@

2. 将所有替换为

@H_403_0@之前v2中的代码如下:

@H_403_0@现在需要更改为BrowserRouter

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

@H_403_0@

3. 只能有一个子节点

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

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

@H_403_0@v4 provides a similar functionality with the component. When a is rendered,it will only render the first child that matches the current location.

( )
@H_403_0@

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

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

<Meta charset="UTF-8"> <Meta name="viewport" content="width=device-width,initial-scale=1">
</div> <script src="./src/bundle.js"&gt;</script>
@H_403_0@上面的页面需要更改为下面这样,否则所有的文件都无法找到:

<Meta charset="UTF-8"> <Meta name="viewport" content="width=device-width,initial-scale=1">
</div> <script src="/src/bundle.js"&gt;</script>
@H_403_0@

三.更多信息

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

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

@H_403_0@Migrating from v2/v3 to v4

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

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

@H_403_0@以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的JavaScript相关文章