react後臺管理系統路由方案及react-router原理解析

    最近做了一個後臺管理系統主體框架是基於React進行開發的，因此係統的路由管理，選用了react-router（4.3.1）插件進行路由頁面的管理配置。

實現原理剖析

1、hash的方式
    以 hash 形式（也可以使用 History API 來處理）爲例，當 url 的 hash 發生變化時，觸發 hashchange 註冊的回調，回調中去進行不同的操作，進行不同的內容的展示

function Router() {
    this.routes = {};
    this.currentUrl = '';
}
Router.prototype.route = function(path, callback) {
    this.routes[path] = callback || function(){};
};
Router.prototype.refresh = function() {
    this.currentUrl = location.hash.slice(1) || '/';
    this.routes[this.currentUrl]();
};
Router.prototype.init = function() {
    window.addEventListener('load', this.refresh.bind(this), false);
    window.addEventListener('hashchange', this.refresh.bind(this), false);
}
window.Router = new Router();
window.Router.init();

    我們也可以自己進行模擬，可以寫成這樣：

function App() {
  // 進入頁面時，先初始化當前 url 對應的組件名
  let hash = window.location.hash
  let initUI = hash === '#login' ? 'login' : 'register'

  let [UI, setUI] = useState(initUI);
  let onClickLogin = () => {
    setUI('Login')
    window.location.hash = 'login'
  }
  let onClickRegister = () => {
    setUI('Register') 
    window.location.hash = 'register'
  }
  let showUI = () => {
    switch(UI) {
      case 'Login':
        return <Login/>
      case 'Register':
        return <Register/>
    }
  }
  return (
    <div className="App">
      <button onClick={onClickLogin}>Login</button>
      <button onClick={onClickRegister}>Register</button>
      <div>
          {showUI()}
      </div>
    </div>
  );
}

    這樣其實已經滿足我們的要求了，如果我在地址欄裏輸入 localhost:8080/#login，就會顯示 。但是這個 “#” 符號不太好看，如果輸入 localhost:8080/login 就完美了。

---

2、history的方式
    H5 提供了一個好用的 history API，使用 window.history.pushState() 使得我們即可以修改 url 也可以不刷新頁面，一舉兩得。現在只需要修改點擊回調裏的 window.location.pathname = ‘xxx’ 就可以了，用 window.history.pushState() 去代替。

function App() {
  // 進入頁面時，先初始化當前 url 對應的組件名
  let pathname = window.location.pathname
  let initUI = pathname === '/login' ? 'login' : 'register'

  let [UI, setUI] = useState(initUI);
  let onClickLogin = () => {
    setUI('Login')
    window.history.pushState(null, '', '/login')
  }
  let onClickRegister = () => {
    setUI('Register') 
    window.history.pushState(null, '', '/register')
  }
  let showUI = () => {
    switch(UI) {
      case 'Login':
        return <Login/>
      case 'Register':
        return <Register/>
    }
  }
  return (
    <div className="App">
      <button onClick={onClickLogin}>Login</button>
      <button onClick={onClickRegister}>Register</button>
      <div>
          {showUI()}
      </div>
    </div>
  );
}

---

3、link的實現
    react-router依賴基礎—history，history是一個獨立的第三方js庫，可以用來兼容在不同瀏覽器、不同環境下對歷史記錄的管理，擁有統一的API。具體來說裏面的history分爲三類：

• 老瀏覽器的history: 主要通過hash來實現，對應createHashHistory，通過hash來存儲在不同狀態下的history信息
• 高版本瀏覽器: 通過html5裏面的history，對應createBrowserHistory，利用HTML5裏面的history
• node環境下: 主要存儲在memeory裏面，對應createMemoryHistory，在內存中進行歷史記錄的存儲

執行URL前進

• createBrowserHistory: pushState、replaceState
• createHashHistory: location.hash=*** location.replace()
• createMemoryHistory: 在內存中進行歷史記錄的存儲

執行URL回退

• createBrowserHistory: popstate
• createHashHistory: hashchange

React組件爲什麼會更新
    其實無論是react-router. react-redux. 能夠使組件更新的根本原因，還是最後出發了setState函數；對於react-router，其實是對history原生對象的封裝，重新封裝了push函數，使得我們在push函數執行的時候，可以觸發在Router組件中組件裝載之前，執行了history.listener函數，該函數的主要作用就是給listeners數組添加監聽函數，每次執行history.push的時候，都會執行listenrs數組中添加的listener, 這裏的listener就是傳入的箭頭函數，功能是執行了Router組件的setState函數，Router執行了setState之後，會將當前url地址欄對應的url傳遞下去，當Route組件匹配到該地址欄的時候，就會渲染該組件，如果匹配不到，Route組件就返回null;

componentWillMount() {
  const { children, history } = this.props

  invariant(
    children == null || React.Children.count(children) === 1,
    'A <Router> may have only one child element'
  )

  // Do this here so we can setState when a <Redirect> changes the
  // location in componentWillMount. This happens e.g. when doing
  // server rendering using a <StaticRouter>.
  //這裏執行history.listen()方法；傳入一個函數；箭頭函數的this指的是父級的作用域中的this值；
  this.unlisten = history.listen(() => {
    this.setState({
      match: this.computeMatch(history.location.pathname)
    })
  })
}

react-router頁面跳轉基本原理
    react-router頁面跳轉的時候，主要是通過框架攔截監聽location的變化，然後根據location中的pathname去同步相對應的UI組件。
    其中在react-router中，URL對應location對象，而UI是有react components來決定的，因此我們要通過router聲明一份含有path to component的詳細映射關係路由表, 觸發 Link 後最終將通過如上面定義的路由表進行匹配，並拿到對應的 component 及 state 進行 render 渲染頁面。
從點擊 Link 到 render 對應 component ，路由中發生了什麼
    Router 在 react component 生命週期之組件被掛載前 componentWillMount 中使用 this.history.listen 去註冊了 url 更新的回調函數。回調函數將在 url 更新時觸發，回調中的 setState 起到 render 了新的 component 的作用。

Router.prototype.componentWillMount = function componentWillMount() {
    // .. 省略其他
    var createHistory = this.props.history;
 
    this.history = _useRoutes2[‘default‘](createHistory)({
      routes: _RouteUtils.createRoutes(routes || children),
      parseQueryString: parseQueryString,
      stringifyQuery: stringifyQuery
    });
 
    this._unlisten = this.history.listen(function (error, state) {
        _this.setState(state, _this.props.onUpdate);
    });
  };

上面的 _useRoutes2 對 history 操作便是對其做一層包裝，所以調用的 this.history 實際爲包裝以後的對象，該對象含有 _useRoutes2 中的 listen 方法，如下：

function listen(listener) {
      return history.listen(function (location) {
          // .. 省略其他
          match(location, function (error, redirectLocation, nextState) {
            listener(null, nextState);
          });
      });
}

可看到，上面的代碼中，主要分爲兩部分：

• 使用了 history 模塊的 listen 註冊了一個含有 setState 的回調函數（這樣就能使用 history 模塊中的機制）
• 回調中的 match 方法爲 react-router 所特有，match 函數根據當前 location 以及前面寫的 Route 路由表匹配出對應的路由子集得到新的路由狀態值 state，具體實現可見 react-router/matchRoutes ，再根據 state 得到對應的 component ，最終執行了 match 中的回調 listener(null, nextState) ，即執行了 Router 中的監聽回調（setState），從而更新了展示。

---

4、路由懶加載（組件按需加載）
    當React項目過大的時候，如果初次進入將所有的組件文件全部加載，那麼將會大大的增加首屏加載的速度，進而影響用戶體驗。因此此時我們需要將路由組件進行按需加載，也就是說，當進入某個URL的時候，再去加載其對應的react component。目前路由的按需加載主要有以下幾種方式：

• 1）react-loadable
     利用react-loadable這個高級組件，要做到實現按需加載這一點，我們將使用的webpack，react-loadable。使用實例如下：

import Loadable from 'react-loadable';
import Loading from './Loading';
const LoadableComponent = Loadable({
  loader: () => import('./Dashboard'),
  loading: Loading,
})
export default class LoadableDashboard extends React.Component {
  render() {
    return <LoadableComponent />;
  }
}

• 2）在router3中的按需加載方式
     route3中實現按需加載只需要按照下面代碼的方式實現就可以了。在router4以前，我們是使用getComponent的的方式來實現按需加載，getComponent是異步的，只有在路由匹配時纔會調用,router4中，getComponent方法已經被移除，所以這種方法在router4中不能使用。

    const about = (location, cb) => {
        require.ensure([], require => {
            cb(null, require('../Component/about').default)
        },'about')
    }
    //配置route
    <Route path="helpCenter" getComponent={about} />

• 3）異步組件
• 創建一個異步組件 AsyncComponent

import React from 'react';

export default function (getComponent) {
  return class AsyncComponent extends React.Component {
    static Component = null;
    state = { Component: AsyncComponent.Component };

    componentWillMount() {
      if (!this.state.Component) {
        getComponent().then(({default: Component}) => {
          AsyncComponent.Component = Component
          this.setState({ Component })
        })
      }
    }
    render() {
      const { Component } = this.state
      if (Component) {
        return <Component {...this.props} />
      }
      return null
    }
  }
}

• 使用異步組件：我們將使用asyncComponent動態導入我們想要的組件。

import asyncComponent from './asyncComponent'
const Login = asyncComponent(() => load('login/login'))
const LayoutPage = asyncComponent(() => load('layout/layout'))
const NoticeDeatil = asyncComponent(() => load('noticeDetail/noticeDetail'))
export const appRouterMap = [
    {path:"/login",name:"Login",component:Login,auth:false},
    {path:"/web",name:"LayoutPage",component:LayoutPage,auth:false},
    {path:"/notice/:id",name:"NoticeDeatil",component:NoticeDeatil,auth:false},
]

---

使用方法

   這次主要是做一個後臺管理系統，因此使用的時候，需要考慮到頁面的內容區域以及固定區域的區別。內容區域的內容隨url的變化而變化，單固定區域內容保持不變，因此常規的路由配置並不能滿足該需求。因此使用的Route嵌套Route的方式實現，外層Route控制固定區域的變化，內層Route控制內容區域的變化。使用實現步驟如下：
1、安裝相關依賴
npm install react-router react-router-dom -S

---

2、配置路由—URL關係映射表

• 固定區域路由配置

import login from '../pages/login/login'
import home from '../pages/home/home'

// `/`和`:`爲關鍵字，不能作爲參數傳遞
let routers = [{
  name: 'login',
  path: '/login',
  title: '登錄',
  exact: true,
  component: login
}, {
  name: 'home', // 名稱，必須唯一
  path: '/home', // 路徑，第一個必須爲'/'，主名字必須唯一，瀏覽器導航路徑（url)
  title: '主頁', // 頁面title及導航欄顯示的名稱
  exact: false, // 嚴格匹配
  component: home
}
]

export default routers

• 內容區域路由配置(此處使用了上面的第一種路由懶加載方法)

import React from 'react'
import Loadable from "react-loadable"
// 注意：參數名不能和路由任何一個path名相同；除path的參數後，path和name必須一樣；`/`和`:`爲關鍵字，不能作爲參數傳遞,parent: 'testpage', // 如果是二級路由，需要指定它的父級（必須)
let routers = [
  {
    name: 'testpage',
    path: '/system/user',
    title: '用戶管理',
    exact: false,
    component: Loadable({
      loader: () => import('../pages/system/user/user'),
      loading: () => <div className="page-loading"><span>加載中......</span></div>
    })
  },
]
export default routers

---

3、將路由注入項目

• 固定區域(關鍵代碼如下)

import Loading from '@components/Loading'
import routers from './routers'
import { HashRouter, Route, Switch, Redirect } from 'react-router-dom'
import page404 from './pages/404/404'
const App = () => {
  return (
    <div className="app">
      <Loading />
      <Switch>
        {routers.map((r, key) => (
          <Route key={key}
            {...r} />
        ))}
        <Redirect from="/"
          to={'/login'}
          exact={true} />
        <Route component={page404} />
      </Switch>
    </div>
  )
}
ReactDOM.render(
  <HashRouter>
    <ConfigProvider locale={zhCN}>
      <App />
    </ConfigProvider>
  </HashRouter>,
  document.getElementById('root')
)

• 內容區域(home文件關鍵代碼如下)

import { Redirect, Route, Switch } from "react-router-dom"
import routers from '../../views/router'
import Page404 from '../404/404'

....省略無數代碼
<Content className={styles.content}>
  <Switch>
    {routers && routers.map((r, key) => {
      const Component = r.component,
      return <Route key={key}
        render={props => <Component {...props}
          allRouters={routers}
          />}
        exact={r.exact}
        path={match + r.path} />
    })}
    <Route component={Page404} />
  </Switch>
</Content>
....省略無數代碼