ReactRouter升级 v2 to v4

JasonZhang 发布于2019-08-20 17:26 / 2357人阅读

摘要：概述相对于几乎是重写了新版的更偏向于组件化。汲取了很多思想，路由即是组件，使路由更具声明式，且方便组合。如果你习惯使用，那么一定会很快上手新版的。被一分为三。不止是否有意义参考资料迁移到关注点官方文档

概述

react-router V4 相对于react-router V2 or V3 几乎是重写了, 新版的react-router更偏向于组件化(everything is component)。

V4汲取了很多思想，路由即是组件，使路由更具声明式，且方便组合。如果你习惯使用react，那么一定会很快上手新版的react-router。

react-router V4 被一分为三: react-router-dom(for web)、react-router-native(for native)、react-router(core)。但如果仅在浏览器中使用的话，一般只需要用到react-router-dom就可以了。

改动点 1. Router/Route 的改变

// V2 or V3
import { Router, Route, hashHistory } from "react-router";

// V4 Router组件里只能渲染一个组件
import {
    HashRouter as Router,
    Route
} from "react-router-dom";

2. 组件嵌套

// V2 or V3 路由组件嵌套
import { Router, Route, hashHistory } from "react-router";

// V4 Router 的路由组件嵌套
import {
    HashRouter as Router,
    Route,
    Switch
} from "react-router-dom";


  (
    
      
        
        
      
    
  )}/>

3. 路由的生命周期

在react-router V4中去掉了on****的路由生命周期的钩子，但是你可以在组件中用componentDidMount 或 componentWillMount 代替 onEnter，可以用componentWillUpdate 或 componentWillReceiveProps代替 onUpdate，你可以用componentWillUnmount 代替 onLeave。

4. Link

// V2 or V3
import { Link } from "react-router";

// V4
import { Link } from "react-router-dom";

5. history.push and history.replace

// V2 or V3
history.push({
    pathname: "/home",
    query: {
        foo: "test",
bar: "temp"
    }
});
history.replace({
    pathname: "/home",
    query: {
        foo: "test",
bar: "temp"
    }
});

// V4
history.push({
    pathname: "/home",
    search: "?foo=test&bar=temp",
});
history.replace({
    pathname: "/home",
    search: "?foo=test&bar=temp",
});

6. props.params

// V2 or V3 获取params可以这么获取
this.props.params

// V4
this.props.match.params

7. location.query

// V2 or V3 获取query可以这么获取
this.props.location.query

// V4 去掉了location.query，只能使用search来获取，为了让其跟浏览器一样
// 如果想要兼容以前的location.query，可以使用query-string库解析一下
// 如: queryString.parse(props.location.search)
this.props.location.search

8. location.action

// V2 or V3 获取location的action
this.props.location.action

// V4 去掉了location.action, 放在了history里面
history.action

9.关于history

以前获取react-router里面的history库，可以这么获取:

import {hashHistory as history} from "react-router";

react-router V4:

import createHashHistory as history from "history/createHashHistory";

兼容处理

因为要从react-router V2完全迁移到react-router V4工作量还是挺大的，一下子难以完全迁移，所以对某些地方做了兼容处理。

history

import _ from "lodash";
import queryString from "query-string";

function processHistory(history) {
    const _push = history.push;
    const _replace = history.replace;

    history.push = function (one) {
        if (!_.isPlainObject(one)) {
            return _push.apply(this, arguments);
        }
        const o = Object.assign({}, one);
        if (o.query) {
            o.search = queryString.stringify(o.query);
        }
        _push.apply(this, [o]);
    };

    history.replace = function (one) {
        if (!_.isPlainObject(one)) {
            return _replace.apply(this, arguments);
        }
        const o = Object.assign({}, one);
        if (o.query) {
            o.search = queryString.stringify(o.query);
        }
        _replace.apply(this, [o]);
    };

    return history;
}

export default processHistory;

props

import queryString from "query-string";

const processReactRouterProps = (props) => {
    const newProps = Object.assign({}, props);
    newProps.location.query = queryString.parse(props.location.search);
    newProps.location.action = newProps.history.action;
    newProps.params = props.match.params || {}; // 不止 || 是否有意义
    return newProps;
}
export default processReactRouterProps;

参考资料:

react-router2 迁移到 react-router4 关注点
react-router 官方文档

云服务器 GPU云服务器 ReactRouter v4 v4包 v4.php

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83584.html

reactRouter V4 的使用

摘要：这是关于自己对版本学习理解做的这里献上官方文档参考死循环之自己引用自己组件解释创建创建路由显示什么组件显示在什么位置它有三个用来定义渲染内容将迭代所有子元素仅渲染与当前位置匹配的第一个子元素当没有路径与当前位置匹配的时候就选择没有设置的组这是关于自己对 REACT-router v4+ 版本学习理解做的dome ## 这里献上git ## 官方文档 ## 参考 ## react 死循...

clasnake 2019-08-23 11:41 评论0 收藏0
【进阶4-2期】Object.assign 原理及其实现

摘要：木易杨注意原始类型被包装为对象木易杨原始类型会被包装，和会被忽略。木易杨原因在于时，其属性描述符为不可写，即。木易杨解决方法也很简单，使用我们在进阶期中介绍的就可以了，使用如下。引言上篇文章介绍了赋值、浅拷贝和深拷贝，其中介绍了很多赋值和浅拷贝的相关知识以及两者区别，限于篇幅只介绍了一种常用深拷贝方案。本篇文章会先介绍浅拷贝 Object.assign 的实现原理，然后带你手动实...

layman 2019-08-23 18:04 评论0 收藏0
项目实践：从react-router v3迁移到v4

摘要：详见对绑定监听事件，把的改变同步到的中用来把的更新同步到中。代码分割版本通过和实现代码分割和动态路由。笔者认为，更符合的组件思想，于是做了一个实践。原文：https://github.com/YutHelloWo... 前言今年3月初发布了react-router v4，相较之前的v3和v2版本做了一个破坏性的升级。遵循一切皆React Component的理念。静态路由变成了动态...

zhangrxiang 2019-08-20 18:36 评论0 收藏0
iWebFusion美国独立服务器$219/月，1Gbps带宽（可升级），2*e5-2699v4(4

摘要：官网美国独立服务器配置信息默认接入带宽，自带个和，流量带宽硬盘都可以定制。月，月，月，，月，月，月，月，月，额月，月，月，月，月。iWebFusion怎么样，iWebFusion好不好，iWebFusion可谓历史悠久，2001年成立，美国超级老牌服务器商家！iWebFusion今年对自家独立服务器进行了改版升级，所有服务器接入1Gbps带宽，可以升级到10Gbps，给的配置超级高，但是价格...

Joonas 2021-08-13 13:25 评论0 收藏0
spinservers：圣何塞10Gbps带宽服务器$109/月起,达拉斯10Gbps服务器$89/

摘要：目前，商家针对部分服务器提供优惠码，优惠后达拉斯机房服务器最低每月美元起，圣何塞机房服务器最低每月美元起，均为端口带宽。 spinservers是Majestic Hosting Solutions LLC旗下站点，主要提供国外服务器租用和Hybrid Dedicated等产品的商家，数据中心包括美国达拉斯和圣何塞机房，机器一般10Gbps端口带宽，高配置硬件，支持使用PayPal、...

FrozenMap 2021-09-28 09:43 评论0 收藏0