In-depth understanding of react-router 4.0 source code starting from routing

This article brings you an in-depth understanding of the react-router 4.0 source code starting from routing. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. The principle of front-end routing such as

react-router is roughly the same, and it can switch to display different pages without refreshing. The essence of routing is that when the URL of the page changes, the display result of the page can change according to the change of the URL, but the page will not be refreshed. Single page (SPA) applications can be implemented through front-end routing. This article first starts from the principle of front-end routing and introduces the changes in the principle of front-end routing in detail. Then starting from the source code of react-router4.0, we will have an in-depth understanding of how react-router4.0 implements front-end routing.

• Front-end routing through Hash

• Front-end routing through H5 history

• React- Use of router4.0

• React-router4.0 source code analysis

1. Implement front-end routing through Hash

1 , Principle of hash

Early front-end routing was implemented through hash:

Changing the hash value of the url will not refresh the page.

Therefore, front-end routing can be implemented through hash, thereby achieving a refresh-free effect. The hash attribute is located in the location object. In the current page, you can change the hash value of the current url through:

window.location.hash='edit'

. After executing the above hash assignment, the URL of the page changes.

Before assignment: http://localhost:3000
After assignment: http://localhost:3000/#edit

There are more hash values ​​ending with # in the url. However, although the hash value of the page changes before and after the assignment, causing the complete URL of the page to change, the page will not be refreshed. In addition, there is an event called hashchange, which can monitor hash changes. We can monitor hash changes in the following two ways:

window.onhashchange=function(event){
   console.log(event);
}
window.addEventListener('hashchange',function(event){
   console.log(event);
})

When the hash value changes, a HashChangeEvent is output. The specific value of the HashChangeEvent is:

{isTrusted: true, oldURL: "http://localhost:3000/", newURL:   "http://localhost:3000/#teg", type: "hashchange".....}

With the listening event, and the changed hash page is not refreshed, we can perform our function of displaying and hiding different UI displays in the callback function of the listening event, thus Implement front-end routing.

In addition, in addition to changing the hash value of the current page through window.location.hash, it can also be achieved through the a tag of html:

<a href="#edit">edit</a>

2. Disadvantages of hash

Hash has good compatibility, so it was widely used in early front-end routing. However, there are also many shortcomings in using hash.

• Search engines are not friendly to pages with hashes

• It is difficult to track user behavior in pages with hashes

2. Implement front-end routing through history

The History interface of HTML5, the History object is a bottom-level interface and does not inherit from any interface. The History interface allows us to manipulate browser session history.

(1)History properties and methods

History provides some properties and methods.

History attributes:

• History.length: Returns how many records there are in the session history, including the current session page. In addition, if you open a new Tab, then the length value is 1

• History.state:

If saved, the popState event will be triggered. method, the attribute object passed (will be introduced in detail in the pushState and replaceState methods later)

History method:

• History.back(): Return to browsing The previous page in the browser session history has the same function as the browser's back button

• History.forward(): Points to the next page in the browser session history, the same as the browser's back button The forward button is the same

• History.go(): You can jump to a specified record page in the browser session history

• History.pushState(): pushState can push the given data into the browser session history stack. This method receives 3 parameters, object, title and a string of urls. After pushState, the current page url will be changed, but it will not be accompanied by a refresh.

• History.replaceState():replaceState will replace the url of the current session page with the specified data. After replaceState, it will also Change the URL of the current page, but the page will not be refreshed.

In the above method, pushState and repalce have the same point:

They will both change the url displayed on the current page, but they will not refresh. page.

Difference:

pushState is pushed into the browser's session history stack, which will increase History.length by 1, while replaceState is Replace the current session history, so History.length.

(2) BOM object history

history in the browser's BOM object model will not be increased. Important attributes, history completely inherits the History interface, so it has all the properties and methods in History.

Here we mainly look at the history.length property and the history.pushState and history.replaceState methods.

• history.pushState(stateObj,title,url) or history.replaceState(stateObj,title,url)

pushState and replaceState accept 3 Parameters, namely state object, title title, and changed url.

window.history.pushState({foo:'bar'}, "page 2", "bar.html");

此时，当前的url变为：

执行上述方法前：http://localhost:3000
执行上述方法后：http://localhost:3000/bar.html

如果我们输出window.history.state:

console.log(window.history.state);
// {foo:'bar'}

window.history.state就是我们pushState的第一个对象参数。

• history.replaceState()方法不会改变hitroy的长度

  console.log(window.history.length);
  window.history.replaceState({foo:'bar'}, "page 2", "bar.html");
  console.log(window.history.length);

上述前后两次输出的window.history.length是相等的。

此外。

每次触发history.back()或者浏览器的后退按钮等，会触发一个popstate事件，这个事件在后退或者前进的时候发生：

window.onpopstate=function(event){

}

注意：
history.pushState和history.replaceState方法并不会触发popstate事件。

如果用history做为路由的基础，那么需要用到的是history.pushState和history.replaceState,在不刷新的情况下可以改变url的地址，且如果页面发生回退back或者forward时，会触发popstate事件。

hisory为依据来实现路由的优点：

• 对搜索引擎友好

• 方便统计用户行为

缺点：

• 兼容性不如hash

• 需要后端做相应的配置，否则直接访问子页面会出现404错误

三、React-router4.0的使用

了解了前端路由实现的原理之后，下面来介绍一下React-router4.0。在React-router4.0的代码库中，根据使用场景包含了以下几个独立的包：

• react-router : react-router4.0的核心代码

• react-router-dom : 构建网页应用，存在DOM对象场景下的核心包

• react-router-native : 适用于构建react-native应用

• react-router-config : 配置静态路由

• react-router-redux : 结合redux来配置路由，已废弃，不推荐使用。

在react-router4.0中，遵循Just Component的设计理念：

所提供的API都是以组件的形式给出。

比如BrowserRouter、Router、Link、Switch等API都是以组件的形式来使用。

1、React-router-dom常用的组件API

下面我们以React-router4.0中的React-router-dom包来介绍常用的BrowserRouter、HashRouter、Link和Router等。

(1)  

用 组件包裹整个App系统后，就是通过html5的history来实现无刷新条件下的前端路由。

组件具有以下几个属性：

• basename: string  这个属性，是为当前的url再增加名为basename的值的子目录。

   <BrowserRouter basename="test"/>

如果设置了basename属性，那么此时的：

http://localhost:3000 和 http://localhost:3000/test  表示的是同一个地址，渲染的内容相同。

• getUserConfirmation: func 这个属性，用于确认导航的功能。默认使用window.confirm

• forceRefresh: bool 默认为false，表示改变路由的时候页面不会重新刷新，如果当前浏览器不支持history，那么当forceRefresh设置为true的时候，此时每次去改变url都会重新刷新整个页面。

• keyLength: number 表示location的key属性的长度，在react-router中每个url下都有为一个location与其对应，并且每一个url的location的key值都不相同，这个属性一般都使用默认值，设置的意义不大。

• children: node children的属性必须是一个ReactNode节点，表示唯一渲染一个元素。

与对应的是,使用url中的hash属性来保证不重新刷新的情况下同时渲染页面。

(2)  

组件十分重要， 做的事情就是匹配相应的location中的地址，匹配成功后渲染对应的组件。下面我们来看中的属性。

首先来看如何执行匹配，决定地址匹配的属性：

• path：当location中的url改变后，会与Route中的path属性做匹配，path决定了与路由或者url相关的渲染效果。

• exact: 如果有exact，只有url地址完全与path相同，才会匹配。如果没有exact属性，url的地址不完全相同，也会匹配。

举例来说，当exact不设置时：

<Route  path=&#39;/home&#39; component={Home}/> 
<Route  path=&#39;/home/first&#39; component={First}/>

此时url地址为：http://localhost:3000/home/first  的时候，不仅仅会匹配到 path='/home/first'时的组件First,同时还会匹配到path='home'时候的Router。

如果设置了exact：

 <Route  path=&#39;/home&#39; component={Home}/>

只有http://localhost:3000/home/first 不会匹配Home组件，只有url地址完全与path相同，只有http://localhost:3000/home才能匹配Home组件成功。

• strict ：与exact不同，strict属性仅仅是对exact属性的一个补充，设置了strict属性后，严格限制了但斜线“／”。

举例来说,当不设置strict的时候：

 <Route  path=&#39;/home/&#39; component={Home}/>

此时http://localhost:3000/home 和 http://localhost:3000/home/
都能匹配到组件Home。匹配对于斜线“/”比较宽松。如果设置了strict属性：

<Route  path=&#39;/home/&#39; component={Home}/>

那么此时严格匹配斜线是否存在，http://localhost:3000/home 将无法匹配到Home组件。

当Route组件与某一url匹配成功后，就会继续去渲染。那么什么属性决定去渲染哪个组件或者样式呢，Route的component、render、children决定渲染的内容。

• component：该属性接受一个React组件，当url匹配成功，就会渲染该组件

• render：func 该属性接受一个返回React Element的函数，当url匹配成功，渲染覆该返回的元素

• children：与render相似，接受一个返回React Element的函数，但是不同点是，无论url与当前的Route的path匹配与否，children的内容始终会被渲染出来。

并且这3个属性所接受的方法或者组件，都会有location，match和history这3个参数。如果组件，那么组件的props中会存在从Link传递过来的location，match以及history。

(3)

定义了匹配规则和渲染规则，而 决定的是如何在页面内改变url，从而与相应的匹配。类似于html中的a标签，此外在改变url的时候，可以将一些属性传递给匹配成功的Route，供相应的组件渲染的时候使用。

• to: string

to属性的值可以为一个字符串，跟html中的a标签的href一样，即使to属性的值是一个字符串，点击Link标签跳转从而匹配相应path的Route，也会将history，location，match这3个对象传递给Route所对应的组件的props中。

举例来说：

<Link to=&#39;/home&#39;>Home</Link>

如上所示，当to接受一个string，跳转到url为'/home'所匹配的Route，并渲染其关联的组件内接受3个对象history，location，match。
这3个对象会在下一小节会详细介绍。

• to: object

to属性的值也可以是一个对象，该对象可以包含一下几个属性：pathname、seacth、hash和state，其中前3个参数与如何改变url有关，最后一个state参数是给相应的改变url时，传递一个对象参数。

举例来说：

 <Link to={{pathname:&#39;/home&#39;,search:&#39;?sort=name&#39;,hash:&#39;#edit&#39;,state:{a:1}}}>Home</Link>

在上个例子中，to为一个对象，点击Link标签跳转后，改变后的url为：'/home?sort=name#edit'。 但是在与相应的Route匹配时，只匹配path为'/home'的组件，'/home?sort=name#edit'。在'/home'后所带的参数不作为匹配标准，仅仅是做为参数传递到所匹配到的组件中，此外，state={a:1}也同样做为参数传递到新渲染的组件中。

(4) React-router中传递给组件props的history对象

介绍了 、 和 之后，使用这3个组件API就可以构建一个简单的React-router应用。这里我们之前说，每当点击Link标签跳转或者在js中使用React-router的方法跳转，从当前渲染的组件，进入新组件。在新组件被渲染的时候，会接受一个从旧组件传递过来的参数。

我们前面提到，Route匹配到相应的改变后的url，会渲染新组件，该新组件中的props中有history、location、match3个对象属性，其中hisotry对象属性最为关键。

同样以下面的例子来说明：

<Link to={{pathname:&#39;/home&#39;,search:&#39;?sort=name&#39;,hash:&#39;#edit&#39;,state:{a:1}}}>Home</Link>

<Route exact path=&#39;/home&#39; component={Home}/>

我们使用了，该组件利用了window.history对象，当点击Link标签跳转后，会渲染新的组件Home，我们可以在Home组件中输出props中的history：

// props中的history
action: "PUSH"
block: ƒ block()
createHref: ƒ createHref(location)
go: ƒ go(n)
goBack: ƒ goBack()
goForward: ƒ goForward()
length: 12
listen: ƒ listen(listener)
location: {pathname: "/home", search: "?sort=name", hash: "#edit", state: {…}, key: "uxs9r5"}
push: ƒ push(path, state)
replace: ƒ replace(path, state)

从上面的属性明细中：

• push:f  这个方法用于在js中改变url，之前在Link组件中可以类似于HTML标签的形式改变url。push方法映射于window.history中的pushState方法。

• replace: f 这个方法也是用于在js中改变url，replace方法映射于window.history中的replaceState方法。

• block：f 这个方法也很有用，比如当用户离开当前页面的时候，给用户一个文字提示，就可以采用history.block("你确定要离开当前页吗？")这样的提示。

• go / goBack / goForward

在组件props中history的go、goBack、goForward方法，分别window.history.go、window.history.back、window.history.forward对应。

• action: "PUSH" || "POP"

action这个属性左右很大，如果是通过Link标签或者在js中通过this.props.push方法来改变当前的url，那么在新组件中的action就是"PUSH",否则就是"POP".

action属性很有用，比如我们在做翻页动画的时候，前进的动画是SlideIn，后退的动画是SlideOut，我们可以根据组件中的action来判断采用何种动画：

function newComponent (props)=>{
   return (
     <ReactCSSTransitionGroup
          transitionAppear={true}
          transitionAppearTimeout={600}
          transitionEnterTimeout={600}
          transitionLeaveTimeout={200}
          transitionName={props.history.action===&#39;PUSH&#39;?&#39;SlideIn&#39;:&#39;SlideOut&#39;}
         >
           <Component {...props}/>
    </ReactCSSTransitionGroup>
   )
}

• location:object

在新组件的location属性中，就记录了从就组件中传递过来的参数，从上面的例子中，我们看到此时的location的值为：

    hash: "#edit"
    key: "uxs9r5"
    pathname: "/home"
    search: "?sort=name"
    state: {a:1}

除了key这个用作唯一表示外，其他的属性都是我们从上一个Link标签中传递过来的参数。

四、React-router4.0源码分析

在第三节中我们介绍了React-router的大致使用方法，读一读React-router4.0的源码。

这里我们主要分析一下React-router4.0中是如何根据window.history来实现前端路由的，因此设计到的组件为BrowserRouter、Router、Route和Link

1、React-router中的history

从上一节的介绍中我们知道，点击Link标签传递给新渲染的组件的props中有一个history对象，这个对象的内容很丰富，比如：action、goBack、go、location、push和replace方法等。

React-router构建了一个History类，用于在window.history的基础上，构建属性更为丰富的实例。该History类实例化后具有action、goBack、location等等方法。

React-router中将这个新的History类的构建方法，独立成一个node包，包名为history。

npm install history -s

可以通过上述方法来引入，我们来看看这个History类的实现。

const createBrowserHistory = (props = {}) => {
    const globalHistory = window.history;
    ......
    //默认props中属性的值
    const {
      forceRefresh = false,
      getUserConfirmation = getConfirmation,
      keyLength = 6,
      basename = '',
    } = props;
    const history = {
        length: globalHistory.length,
        action: "POP",
        location: initialLocation,
        createHref,
        push,
        replace,
        go,
        goBack,
        goForward,
        block,
        listen
    };                                         ---- (1)
    const basename = props.basename;   
    const canUseHistory = supportsHistory();   ----（2)
            
    const createKey = () =>Math.random().toString(36).substr(2, keyLength);    ----（3）
    
    const transitionManager = createTransitionManager();  ----（4）
    const setState = nextState => {
        Object.assign(history, nextState);
    
        history.length = globalHistory.length;
    
        transitionManager.notifyListeners(history.location, history.action);
    };                                      ----（5）
    
    const handlePopState = event => {
        handlePop(getDOMLocation(event.state));
    };
    const handlePop = location => {
    if (forceNextPop) {
      forceNextPop = false;
      setState();
    } else {
      const action = "POP";
      
      transitionManager.confirmTransitionTo(
            location,
            action,
            getUserConfirmation,
            ok => {
              if (ok) {
                setState({ action, location });
              } else {
                revertPop(location);
              }
            }
          );
        }
    };                                    ------（6）
    const initialLocation = getDOMLocation(getHistoryState());
    let allKeys = [initialLocation.key]; ------（7）
    
  
    // 与pop相对应，类似的push和replace方法
    const push ... replace ...            ------(8)
    
    return history                        ------ （9）
    
}

• (1) 中指明了新的构建方法History所返回的history对象中所具有的属性。

• (2)中的supportsHistory的方法判断当前的浏览器对于window.history的兼容性，具体方法如下：

    export const supportsHistory = () => {
      const ua = window.navigator.userAgent;
    
      if (
        (ua.indexOf("Android 2.") !== -1 || ua.indexOf("Android 4.0") !== -1) &&
        ua.indexOf("Mobile Safari") !== -1 &&
        ua.indexOf("Chrome") === -1 &&
        ua.indexOf("Windows Phone") === -1
      )
        return false;
    
      return window.history && "pushState" in window.history;
    };

从上述判别式我们可以看出，window.history在chrome、mobile safari和windows phone下是绝对支持的，但不支持安卓2.x以及安卓4.0

• (3)中用于创建与history中每一个url记录相关联的指定位数的唯一标识key, 默认的keyLength为6位

• (4)中 createTransitionManager方法，返回一个集成对象，对象中包含了关于history地址或者对象改变时候的监听函数等，具体代码如下：

       const createTransitionManager = () => {
           const setPrompt = nextPrompt => {
             
           };
     
           const confirmTransitionTo = (
             location,
             action,
             getUserConfirmation,
             callback
           ) => {
              if (typeof getUserConfirmation === "function") {
                   getUserConfirmation(result, callback);
                 } else {
                   callback(true);
                 }
               } 
           };
           
           
           let listeners = [];
           const appendListener = fn => {
             let isActive = true;
         
             const listener = (...args) => {
               if (isActive) fn(...args);
             };
         
             listeners.push(listener);
         
             return () => {
               isActive = false;
               listeners = listeners.filter(item => item !== listener);
             };
           };
         
           const notifyListeners = (...args) => {
             listeners.forEach(listener => listener(...args));
           };
         
           return {
             setPrompt,
             confirmTransitionTo,
             appendListener,
             notifyListeners
           };

};

setPrompt函数，用于设置url跳转时弹出的文字提示，confirmTransaction函数，会将当前生成新的history对象中的location，action，callback等参数，作用就是在回调的callback方法中，根据要求，改变传入的location和action对象。

接着我们看到有一个listeners数组，保存了一系列与url相关的监听事件数组，通过接下来的appendListener方法，可以往这个数组中增加事件，通过notifyListeners方法可以遍历执行listeners数组中的所有事件。

• (5) setState方法，发生在history的url或者history的action发生改变的时候，此方法会更新history对象中的属性，同时会触发notifyListeners方法，传入当前的history.location和history.action。遍历并执行所有监听url改变的事件数组listeners。

• (6)这个getDOMLocation方法就是根据当前在window.state中的值，生成新history的location属性对象，allKeys这是始终保持了在url改变时候的历史url相关联的key，保存在全局，allKeys在执行生“POP”或者“PUSH”、“Repalce”等会改变url的方法时，会保持一个实时的更新。

• (7) handlePop方法，用于处理“POP”事件，我们知道在window.history中点击后退等会触发“POP”事件，这里也是一样，执行action为“POP”，当后退的时候就会触发该函数。

• (8)中包含了与pop方法类似的，push和replace方法，push方法同样做的事情就是执行action为“PUSH”（“REPLACE”），该变allKeys数组中的值，唯一不同的是actio为“PUSH”的方法push是往allKeys数组中添加，而action为“REPLACE”的方法replace则是替换掉当前的元素。

• (9)返回这个新生成的history对象。

2、React-router中Link组件

其实最难弄懂的是React-router中如何重新构建了一个history工厂函数，在第一小节中我们已经详细的介绍了history生成函数createBrowserHistory的源码，接着来看Link组件就很容易了。

首先Link组件类似于HTML中的a标签，目的也很简单，就是去主动触发改变url的方法，主动改变url的方法，从上述的history的介绍中可知为push和replace方法，因此Link组件的源码为：

class Link extends React.Component {

    
   handleClick = event => {
   ...

     const { history } = this.context.router;
     const { replace, to } = this.props;
     if (replace) {
       history.replace(replace);
     } else {
      history.push(to);
     }
   }
  };
  render(){
    const { replace, to, innerRef, ...props } = this.props;
     <a {...props} onClick={this.handleClick}/>
  }
}

上述代码很简单，从React的context API全局对象中拿到history，然后如果传递给Link组件的属性中有replace为true，则执行history.replace(to),to 是一个包含pathname的对象，如果传递给Link组件的replace属性为false，则执行history.push(to)方法。

3、React-router中Route组件

Route组件也很简单，其props中接受一个最主要的属性path，Route做的事情只有一件：

当url改变的时候，将path属性与改变后的url做对比，如果匹配成功，则渲染该组件的componet或者children属性所赋值的那个组件。

具体源码如下：

class Route extends React.Component {


  ....
  constructor(){
  
  
  }
  render() {
    const { match } = this.state;
    const { children, component, render } = this.props;
    const { history, route, staticContext } = this.context.router;
    const location = this.props.location || route.location;
    const props = { match, location, history, staticContext };

    if (component) return match ? React.createElement(component, props) : null;

    if (render) return match ? render(props) : null;

    if (typeof children === "function") return children(props);

    if (children && !isEmptyChildren(children))
      return React.Children.only(children);

    return null;
  }

}

state中的match就是是否匹配的标记，如果匹配当前的Route的path，那么根据优先级顺序component属性、render属性和children属性来渲染其所指向的React组件。

4、React-router中Router组件

Router组件中，是BrowserRouter、HashRouter等组件的底层组件。该组件中，定义了包含匹配规则match函数，以及使用了新history中的listener方法，来监听url的改变，从而，当url改变时，更改Router下不同path组件的isMatch结果。

class Router extends React.Component {
    componentWillMount() {
        const { children, history } = this.props
        
        //调用history.listen监听方法，该方法的返回函数是一个移除监听的函数
        
        this.unlisten = history.listen(() => {
          this.setState({
            match: this.computeMatch(history.location.pathname)
          });
        });
    }
    componentWillUnmount() {
      this.unlisten();
    }
    render() {
    
    }
}

上述首先在组件创建前调用了listener监听方法，来监听url的改变，实时的更新isMatch的结果。

5、总结

本文从前端路由的原理出发，先后介绍了两种前端路由常用的方法，接着介绍了React-router的基本组件API以及用法，详细介绍了React-router的组件中新构建的history对象，最后结合React-router的API阅读了一下React-router的源码。

The above is the detailed content of In-depth understanding of react-router 4.0 source code starting from routing. For more information, please follow other related articles on the PHP Chinese website!