个人中心
退出
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>
....省略无数代码
欢迎关注微信公众号:猴哥说前端
分类导航