React-router

BaronZhang 發布于2019-08-23 10:31 / 2379人閱讀

摘要：依賴于一概念理解痛點界面需要導航，需要根據不同的導航加載不同的模塊需要處理的問題地址欄按需加載不同的模塊適當進行個性化處理其實，上面兩個問題，并不難處理，但是本著抽象的原則，需要抽象出一個通用的模塊。提供了一個良好的機制進行處理。

React-router依賴于：history

一、概念理解

痛點：界面需要導航，需要根據不同的導航加載不同的模塊
需要處理的問題：
1、URL地址欄
2、按需加載不同的模塊（適當進行個性化處理）
其實，上面兩個問題，并不難處理，但是本著抽象的原則，需要抽象出一個通用的模塊。
React-router提供了一個良好的機制進行處理。

二、簡單Demo

三、源碼解析 1、Router和Route

????Route：匹配路徑，并進行渲染

//代碼是部分代碼模塊，如果想看真的源碼，移步github
class Route extends React.Component(){
    constructor(){
        this.state={
            match:this.computeMatch(this.props, this.context.router)
        }
    }
    //這部分的目的主要是讓大家了解下源碼中需要輸入的參數和類型
    static propTypes = {
        computedMatch: PropTypes.object, // private, from 
        path: PropTypes.string,
        exact: PropTypes.bool,
        strict: PropTypes.bool,
        sensitive: PropTypes.bool,
        component: PropTypes.func,
        render: PropTypes.func,
        children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
        location: PropTypes.object
    };
    //每次路由發生變化，就進行重新渲染
    componentWillReceiveProps(nextProps,nextContext){
        this.setState({
            match: this.computeMatch(nextProps, nextContext.router)
        });
    }
    render(){
        //返回
            if (component) return match ? React.createElement(component, props) : null;

    }
}

????Router：把history放入全局的context里面

class Router extends React.Component {
    //輸入參數多了history
    static propTypes = {
        history: PropTypes.object.isRequired,
        children: PropTypes.node
    };
    //大部分都一樣，render返回不一樣
    render() {
        const { children } = this.props;
        return children ? React.Children.only(children) : null;
      }
}

2、Switch、Redirect

//switch核心模塊
    let match, child;
    React.Children.forEach(children, element => {
      if (match == null && React.isValidElement(element)) {
        const {
          path: pathProp,
          exact,
          strict,
          sensitive,
          from
        } = element.props;
        const path = pathProp || from;

        child = element;
        match = matchPath(
          location.pathname,
          { path, exact, strict, sensitive },
          route.match
        );
      }
    });

    return match
      ? React.cloneElement(child, { location, computedMatch: match })
      : null;
      
//Redirect核心模塊
componentDidUpdate(prevProps) {
    const prevTo = createLocation(prevProps.to);
    const nextTo = createLocation(this.props.to);
    this.perform();
  }

  computeTo({ computedMatch, to }) {
    if (computedMatch) {
      if (typeof to === "string") {
        return generatePath(to, computedMatch.params);
      } else {
        return {
          ...to,
          pathname: generatePath(to.pathname, computedMatch.params)
        };
      }
    }

    return to;
  }

  perform() {
    const { history } = this.context.router;
    const { push } = this.props;
    const to = this.computeTo(this.props);

    if (push) {
      history.push(to);
    } else {
      history.replace(to);
    }
  }

3、HashRouter、BrowserRouter：以Router為基礎

//HashRouter源碼很簡單
import { createHashHistory as createHistory } from "history";

class HashRouter extends React.Component {
  static propTypes = {
    basename: PropTypes.string,
    getUserConfirmation: PropTypes.func,
    hashType: PropTypes.oneOf(["hashbang", "noslash", "slash"]),
    children: PropTypes.node
  };

  history = createHistory(this.props);

  render() {
    return ;
  }
}

//BrowserRouter源碼也很簡單
import { createBrowserHistory as createHistory } from "history";

class BrowserRouter extends React.Component {
  static propTypes = {
    basename: PropTypes.string,
    forceRefresh: PropTypes.bool,
    getUserConfirmation: PropTypes.func,
    keyLength: PropTypes.number,
    children: PropTypes.node
  };

  history = createHistory(this.props);

  render() {
    return ;
  }
}

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96428.html

react-router 升級小記

摘要：前言最近將公司項目的從版本升到了版本，跟完全不兼容，是一次徹底的重寫。升級過程中踩了不少的坑，也有一些值得分享的點。沒有就會匹配所有路由最后不得不說升級很困難，坑也很多。前言最近將公司項目的 react-router 從 v3 版本升到了 v4 版本，react-router v4 跟 v3 完全不兼容，是一次徹底的重寫。這也給升級造成了極大的困難，與其說升級不如說是對 route...

isLishude 2019-08-21 18:30 評論0 收藏0
ReactRouter升級 v2 to v4

摘要：概述相對于幾乎是重寫了新版的更偏向于組件化。汲取了很多思想，路由即是組件，使路由更具聲明式，且方便組合。如果你習慣使用，那么一定會很快上手新版的。被一分為三。不止是否有意義參考資料遷移到關注點官方文檔概述 react-router V4 相對于react-router V2 or V3 幾乎是重寫了, 新版的react-router更偏向于組件化(everything is comp...

JasonZhang 2019-08-20 17:26 評論0 收藏0
React-Router實現原理，解決了什么問題？

摘要：解決了什么問題首先，它搭配組件，可以組織組件結構代碼，授權路由的控制。有兩種方式核心的各自做了什么事首先它們都是基于構建，也就是的組件的路由，至于各自做了什么。去看官方文檔，里面描述了每一個組件路由做了什么事。 React-Router解決了什么問題？首先，它搭配React組件，可以組織React組件結構代碼，授權路由的控制。應該展示什么樣的組件，通過React-Router去匹配它...

kgbook 2019-08-23 17:15 評論0 收藏0
[ 一起學React系列 -- 11 ] React-Router4 (1)

摘要：中的包中的包主要有三個和。的理念上面提到的理念是一切皆組件以下統一稱組件。從這點來說的確方便了不少，也迎合一切皆組件的理念。組件是中主要的組成單位，可以認為是或的路由入口。將該標示為嚴格匹配路由。的屬性追加一條。 2019年不知不覺已經過去19天了，有沒有給自己做個總結？有沒有給明年做個計劃？當然筆者已經做好了明年的工作、學習計劃；同時也包括該系列博客剩下的博文計劃，目前還剩4篇：分別...

tinysun1234 2019-08-23 14:49 評論0 收藏0
前端路由實現與 react-router 源碼分析

摘要：回調函數將在更新時觸發，回調中的起到了新的的作用。注冊回調在中使用注冊的回調函數，最終放在模塊的回調函數數組中。原文地址：https://github.com/joeyguo/blog/issues/2 在單頁應用上，前端路由并不陌生。很多前端框架也會有獨立開發或推薦配套使用的路由系統。那么，當我們在談前端路由的時候，還可以談些什么？本文將簡要分析并實現一個的前端路由，并對 reac...

ISherry 2019-08-19 18:22 評論0 收藏0
從路由原理出發，深入閱讀理解react-router 4.0的源碼

摘要：通過前端路由可以實現單頁應用本文首先從前端路由的原理出發，詳細介紹了前端路由原理的變遷。接著從的源碼出發，深入理解是如何實現前端路由的。執行上述的賦值后，頁面的發生改變。 ??react-router等前端路由的原理大致相同，可以實現無刷新的條件下切換顯示不同的頁面。路由的本質就是頁面的URL發生改變時，頁面的顯示結果可以根據URL的變化而變化，但是頁面不會刷新。通過前端路由可以實現...

Miyang 2019-08-23 12:01 評論0 收藏0