聊聊前端的路由方案

概要

本文主要梳理前端路由的实现方案,按照如下的逻辑进行梳理：前置知识 => 路由方案现状 => 从源码的解读理解前端路由的实现过程

前置知识

history

方法(属性)	含义
history.length	只读, 代表当前会话历史的长度
history.state	只读, 代表当前会话栈顶的state
history.go(number) history.forward() history.back()	从当前会话加载特定的页面,会触发popstate事件
pushState(state, title, url)	在当前会话的添加一个新的记录(关联state) url参数需要保证同源策略
replaceState(state, title, url)	替换当前会话栈顶的记录(不会增加history长度,关联state) url参数需要保证同源策略

history相关事件

当用户触发浏览器动作或者js调用history.back/history.forward/history.go方法时,会触发popstate事件。

hash相关事件

当url片段标识符改变(#xxx), 会触发hashchange事件。
当设置与当前不同的hash片段的时候,会在当前会话中添加一个新的记录。

路由方案现状

方案	原理	优缺点
基于history实现的路由方案	使用history相关事件和方法完成路由的切换	history可以设置同源下的任意url,需要注意与服务端结合的场景,防止出现404
基于hash实现的路由方案	使用hash相关事件完成路由的切换	hash只能改变当前url的#,有局限性

从源码的了解路由的实现过程

以下源码分析了history路由的实现过程,源码涉及history, react-router.整体的实现逻辑如下

下面代码是在react项目中使用history路由实现的一个例子,它能实现根据特定的path来渲染对应的组件。

    import './App.css';
    import React from 'react'
    import {
      BrowserRouter as Router,
      Switch,
      Route,
    } from "react-router-dom";
    function App() {
      return (
        <Router >
          <Switch>
            <Route exact path="/">
                <div>home</div>
              </Route>
              <Route path="/about">
                <div>about</div>
              </Route>
              <Route path="/dashboard">
                <div>dashboard</div>
              </Route>
          </Switch>
        </Router>
      );
    }
    export default App;

react-router/packages/react-router-dom/modules/BrowserRouter.js

    import React from "react";
    import { Router } from "react-router";
    import { createBrowserHistory as createHistory } from "history";

    class BrowserRouter extends React.Component {
      history = createHistory(this.props);

      render() {
        // 初始化browser history 可以推断出路由的切换逻辑是history与Router结合的实现
        return <Router history={this.history} children={this.props.children} />;
      }
    }
    export default BrowserRouter;

packages/index.ts

    // 在最后执行跳转的时候 会执行所有的listen函数
    function applyTx(nextAction: Action) {
      action = nextAction;
      [index, location] = getIndexAndLocation();
      listeners.call({ action, location });
    }
    let history: BrowserHistory = {
      // 以下为主要的跳转函数,在实现跳转逻辑的时候都调用了applyT方法。
      push,
      replace,
      go,
      back() {
        go(-1);
      },
      forward() {
        go(1);
      },
      // listion方法用于增加路由切换的监听函数
      listen(listener) {
        return listeners.push(listener);
      },
      // block方法允许传入一个block函数,在路由跳转的时候会执行所有的blocker函数
      block(blocker) {
        let unblock = blockers.push(blocker);
        if (blockers.length === 1) {
          window.addEventListener(BeforeUnloadEventType, promptBeforeUnload);
        }
        return function() {
          unblock();
          if (!blockers.length) {
            window.removeEventListener(BeforeUnloadEventType, promptBeforeUnload);
          }
        };
      }
    };
    return history;

从上面history源码看出,history这个库主要是维护history的相关状态(state, location, hash)并且增加路由跳转的告知能力.

react-router/packages/react-router/modules/Router.js

    import React from "react";
    import HistoryContext from "./HistoryContext.js";
    import RouterContext from "./RouterContext.js";
    class Router extends React.Component {
      static computeRootMatch(pathname) {
        return { path: "/", url: "/", params: {}, isExact: pathname === "/" };
      }
      constructor(props) {
        super(props);
        this.state = {
          location: props.history.location
        };
        this._isMounted = false;
        this._pendingLocation = null;
        if (!props.staticContext) {
          // 这里订阅了history的变化并且在变化的之后更新location
          this.unlisten = props.history.listen(location => {
            if (this._isMounted) {
              this.setState({ location });
            } else {
              this._pendingLocation = location;
            }
          });
        }
      }
      componentDidMount() {
        this._isMounted = true;
        if (this._pendingLocation) {
          this.setState({ location: this._pendingLocation });
        }
      }
      render() {
        return (
          // 将location作为context 在需要订阅的位置获取   Route消费location完成特定children的渲染。
          <RouterContext.Provider
            value={{
              history: this.props.history,
              location: this.state.location,
              match: Router.computeRootMatch(this.state.location.pathname),
              staticContext: this.props.staticContext
            }}
          >
            <HistoryContext.Provider
              children={this.props.children || null}
              value={this.props.history}
            />
          </RouterContext.Provider>
        );
      }
    }
    export default Router;