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>
....省略无数代码