成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

ReactRouter升級(jí) v2 to v4

JasonZhang / 2415人閱讀

摘要：概述相對(duì)于幾乎是重寫了新版的更偏向于組件化。汲取了很多思想，路由即是組件，使路由更具聲明式，且方便組合。如果你習(xí)慣使用，那么一定會(huì)很快上手新版的。被一分為三。不止是否有意義參考資料遷移到關(guān)注點(diǎn)官方文檔

概述

react-router V4 相對(duì)于react-router V2 or V3 幾乎是重寫了, 新版的react-router更偏向于組件化(everything is component)。

V4汲取了很多思想，路由即是組件，使路由更具聲明式，且方便組合。如果你習(xí)慣使用react，那么一定會(huì)很快上手新版的react-router。

react-router V4 被一分為三: react-router-dom(for web)、react-router-native(for native)、react-router(core)。但如果僅在瀏覽器中使用的話，一般只需要用到react-router-dom就可以了。

改動(dòng)點(diǎn) 1. Router/Route 的改變 
// V2 or V3
import { Router, Route, hashHistory } from "react-router";


  
  

// V4 Router組件里只能渲染一個(gè)組件
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來(lái)獲取，為了讓其跟瀏覽器一樣
// 如果想要兼容以前的location.query，可以使用query-string庫(kù)解析一下
// 如: 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.關(guān)于history

以前獲取react-router里面的history庫(kù)，可以這么獲取:

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

react-router V4:

import createHashHistory as history from "history/createHashHistory";
兼容處理

因?yàn)橐獜?b>react-router V2完全遷移到react-router V4工作量還是挺大的，一下子難以完全遷移，所以對(duì)某些地方做了兼容處理。

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 關(guān)注點(diǎn)
react-router 官方文檔

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/83584.html

相關(guān)文章

  • reactRouter V4 的使用

    摘要：這是關(guān)于自己對(duì)版本學(xué)習(xí)理解做的這里獻(xiàn)上官方文檔參考死循環(huán)之自己引用自己組件解釋創(chuàng)建創(chuàng)建路由顯示什么組件顯示在什么位置它有三個(gè)用來(lái)定義渲染內(nèi)容將迭代所有子元素僅渲染與當(dāng)前位置匹配的第一個(gè)子元素當(dāng)沒有路徑與當(dāng)前位置匹配的時(shí)候就選擇沒有設(shè)置的組 這是關(guān)于自己對(duì) REACT-router v4+ 版本學(xué)習(xí)理解做的dome ## 這里獻(xiàn)上git ## 官方文檔 ## 參考 ## react 死循...

    clasnake 評(píng)論0 收藏0

  • 【進(jìn)階4-2期】Object.assign 原理及其實(shí)現(xiàn)

    摘要：木易楊注意原始類型被包裝為對(duì)象木易楊原始類型會(huì)被包裝，和會(huì)被忽略。木易楊原因在于時(shí)，其屬性描述符為不可寫，即。木易楊解決方法也很簡(jiǎn)單，使用我們?cè)谶M(jìn)階期中介紹的就可以了，使用如下。 引言 上篇文章介紹了賦值、淺拷貝和深拷貝，其中介紹了很多賦值和淺拷貝的相關(guān)知識(shí)以及兩者區(qū)別，限于篇幅只介紹了一種常用深拷貝方案。 本篇文章會(huì)先介紹淺拷貝 Object.assign 的實(shí)現(xiàn)原理，然后帶你手動(dòng)實(shí)...

    layman 評(píng)論0 收藏0

  • 項(xiàng)目實(shí)踐：從react-router v3遷移到v4

    摘要：詳見對(duì)綁定監(jiān)聽事件，把的改變同步到的中用來(lái)把的更新同步到中。代碼分割版本通過和實(shí)現(xiàn)代碼分割和動(dòng)態(tài)路由。筆者認(rèn)為，更符合的組件思想，于是做了一個(gè)實(shí)踐。 原文：https://github.com/YutHelloWo... 前言 今年3月初發(fā)布了react-router v4，相較之前的v3和v2版本做了一個(gè)破壞性的升級(jí)。遵循一切皆React Component的理念。靜態(tài)路由變成了動(dòng)態(tài)...

    zhangrxiang 評(píng)論0 收藏0

  • iWebFusion美國(guó)獨(dú)立服務(wù)器$219/月，1Gbps帶寬（可升級(jí)），2*e5-2699v4(4

    摘要：官網(wǎng)美國(guó)獨(dú)立服務(wù)器配置信息默認(rèn)接入帶寬，自帶個(gè)和，流量帶寬硬盤都可以定制。月，月，月，，月，月，月，月，月，額月，月，月，月，月。iWebFusion怎么樣，iWebFusion好不好，iWebFusion可謂歷史悠久，2001年成立，美國(guó)超級(jí)老牌服務(wù)器商家！iWebFusion今年對(duì)自家獨(dú)立服務(wù)器進(jìn)行了改版升級(jí)，所有服務(wù)器接入1Gbps帶寬，可以升級(jí)到10Gbps，給的配置超級(jí)高，但是價(jià)格...

    Joonas 評(píng)論0 收藏0

  • spinservers：圣何塞10Gbps帶寬服務(wù)器$109/月起,達(dá)拉斯10Gbps服務(wù)器$89/

    摘要：目前，商家針對(duì)部分服務(wù)器提供優(yōu)惠碼，優(yōu)惠后達(dá)拉斯機(jī)房服務(wù)器最低每月美元起，圣何塞機(jī)房服務(wù)器最低每月美元起，均為端口帶寬。? spinservers是Majestic Hosting Solutions LLC旗下站點(diǎn)，主要提供國(guó)外服務(wù)器租用和Hybrid Dedicated等產(chǎn)品的商家，數(shù)據(jù)中心包括美國(guó)達(dá)拉斯和圣何塞機(jī)房，機(jī)器一般10Gbps端口帶寬，高配置硬件，支持使用PayPal、...

    FrozenMap 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<