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

一.前言

上午把近日用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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • React-router v4 路由配置方法小结

    React-router v4 路由配置方法小结

    本文主要介绍了React-router v4 路由配置方法小结,分享给大家,也给自己留个笔记 一. Switch .Router .Route三者的区别 1.Route Route 是建立location 和 ui的最直接联系 2.Router react-router v4 中,Router被拆分成了StaticRouter.MemoryRouter.BrowserRouter.HashRouter.NativeRouter. MemoryRouter.BrowserRouter.HashRo

  • 深入理解react-router@4.0 使用和源码解析

    如果你已经是一个正在开发中的react应用,想要引入更好的管理路由功能.那么,react-router是你最好的选择~ react-router版本现今已经到4.0.0了,而上一个稳定版本还是2.8.1.相信我,如果你的项目中已经在使用react-router之前的版本,那一定要慎重的更新,因为新的版本是一次非常大的改动,如果你要更新,工作量并不小. 这篇文章不讨论版本的变化,只是讨论一下React-router4.0的用法和源码. 源码在这里:https://github.com/ReactT

  • react-router4 嵌套路由的使用方法

    react我自己还在摸索学习中,今天正好学习一下react-router4 嵌套路由的使用方法,顺便留着笔记 先直接贴代码 import React from 'react'; import ReactDOM from 'react-dom'; import { HashRouter as Router, Route, Switch} from 'react-router-dom'; import createBrowserHistory from 'history/createBrowserH

  • React-router 4 按需加载的实现方式及原理详解

    React-router 4 介绍了在router4以后,如何去实现按需加载Component,在router4以前,我们是使用getComponent的的方式来实现按需加载的,router4中,getComponent方法已经被移除,下面就介绍一下react-router4是入围和来实现按需加载的. 1.router3的按需加载方式 route3中实现按需加载只需要按照下面代码的方式实现就可以了. const about = (location, cb) => { require.ensure

  • 详解element-ui 组件el-autocomplete使用踩坑记录

    详解element-ui 组件el-autocomplete使用踩坑记录

    项目遇到一个比较麻烦的需求,保存用户填写的历史记录,项目使用的element-ui,自然就使用了el-autocomplete组件,然后就是各种踩坑,以下记录以下写代码过程中遇到的问题 createFilter(queryString, filed) { console.log("createFilter==" + queryString) return (item) => { switch (filed) { case 'cardNum': break case 'cardPa

  • React Router v4 入坑指南(小结)

    距离React Router v4 正式发布也已经过去三个月了,这周把一个React的架子做了升级,之前的路由用的还是v2.7.0版的,所以决定把路由也升级下,正好"尝尝鲜"... 江湖传言,目前官方同时维护 2.x 和 4.x 两个版本.(ヾ(｡ꏿ﹏ꏿ)ﾉﾞ咦,此刻相信机智如我的你也会发现,ReactRouter v3 去哪儿了?整丢了??巴拉出锅了???敢不敢给我个完美的解释!?)事实上 3.x 版本相比于 2.x 并没有引入任何新的特性,只是将 2.x 版本中部分废弃 API 的

  • 详解nginx basic auth配置踩坑记

    nginx的basic auth配置由ngx_http_auth_basic_module模块提供,对HTTP Basic Authentication协议进行了支持,用户可通过该配置设置用户名和密码对web站点进行简单的访问控制. basic auth配置示例: location / { auth_basic "closed site"; auth_basic_user_file conf/htpasswd; } 说明: auth_basic可设置为off或其它字符串,为off时表示

  • 详解vue中使用protobuf踩坑记

    官方解释为: Protocol buffers are a flexible, efficient, automated mechanism for serializing structured data – think XML, but smaller, faster, and simpler. You define how you want your data to be structured once, then you can use special generated source c

  • 详解antd+react项目迁移vite的解决方案

    antd+react+webpack往往是以react技术栈为主的前端项目的标准组合,三者都有成熟的生态和稳定的表现,但随着前端圈的技术不断革新,号称下一代构建平台vite2的发布,webpack似乎不那么香了,为什么这么说呢,因为vite太快了.经过一段时间的尝试,决定在项目中把webpack替换成vite试试,遂写成本文分享给大家. Vite是什么 作为本文的主角,首先简单介绍一下vite这个构建工具,该工具是尤雨溪推出的[下一代前端开发和构建工具],vite其实也不是一个新的工具,早在一年

  • 详解npm和cnpm混用的坑

    详解npm和cnpm混用的坑

    目录 起因 原因 NPM介绍: CNPM介绍: 更好的方式 方式改进 有没有遇到过npm和cnpm一起用的时候出现奇奇怪怪的问题呢? 有没有遇到过cnpm在支付宝小程序上面安装包无效?他们真的只是切换一个请求源吗? 我相信很多小伙伴使用cnpm的目的都很简单,那就是为了更快的下载东西,他会把请求源换成https://registry.npm.taobao.org 于是,我们就 npm install -g cnpm --registry=https://registry.npm.taobao.o

  • 详解Java 集合类 List 的那些坑

    现在的一些高级编程语言都会提供各种开箱即用的数据结构的实现,像 Java 编程语言的集合框架中就提供了各种实现,集合类包含 Map 和 Collection 两个大类,其中 Collection 下面的 List 列表是我们经常使用的集合类之一,很多的业务代码都离不开它,今天就来看看 List 列表的一些坑. 第一个坑:Arrays.asList 方法返回的 List 不支持增加.删除操作 例如我们执行以下代码: List<String> strings = Arrays.asList(&qu

  • 详解记录MySQL中lower_case_table_names的坑

    1 起因 项目迁移数据库, 重新启动后, 报错"T_AAA表不存在", 但数据库中可以查看到该表并有数据 2 问题分析 通过重装系统与数据库, 确认系统与数据库纯净, 排除系统和数据库的原因 使用同一方式恢复两天前和一天前的数据备份, 同样不能启动项目, 排除数据内容的原因 使用mysqldump和导出SQL文件两种方式, 恢复一天前的数据, 同样不能启动项目, 排除恢复方式的原因 以上方式基本是运维人员参与, 等技术总监参与观察项目报错后, 猛然发现是表名大小写的问题, 通过测试最终

  • 详解对于React结合Antd的Form组件实现登录功能

    一.React 结合 Antd 实现登录功能 引入所需的 Antd 组件,代码如下所示: import { Form, Icon, Input, Button, message } from 'antd' 在 Login.jsx 中,创建一个 Login 组件.当对外暴露组件时,需要使用 Form 组件进行包装,包装 Form 组件生成一个新的组件 Form(Login),同时新组件会向 Form 组件传递一个强大的对象属性 form,这样就可以取到 Form 表单的值,这也是高阶组件和高阶函数

  • 详解vue中$router和$route的区别

    详解vue中$router和$route的区别

    我们在 vue 项目中一般都会用到路由,而 vue-router 是 vue.js 官方的路由管理器. this.$route:当前激活的路由的信息对象.每个对象都是局部的,可以获取当前路由的 path, name, params, query 等属性. this.$router:全局的 router 实例.通过 vue 根实例中注入 router 实例,然后再注入到每个子组件,从而让整个应用都有路由功能.其中包含了很多属性和对象(比如 history 对象),任何页面也都可以调用其 push(

随机推荐