1. 程式人生 > >react 路由懶載入 和 攔截

react 路由懶載入 和 攔截

import React from 'react'
import { Router, Route, IndexRoute } from 'react-router'
import hashHistory from './history'

import App from './base'
//路由懶載入
const table = (location, cb) => {
  require.ensure([], (require) => {
    cb(null, require('./pages/menu/table').default)
  }, 'table')
}
//路由攔截
function
isLogin(nextState, replaceState) { const token = sessionStorage.getItem('token') if (!token) { replaceState('/login') // hashHistory.push('/login') } } export default () =>
( <Router history={hashHistory}> <Route path="/" component={App} onEnter={isLogin}> <IndexRoute component={Welcome} /> <Redirect exact from="/order"
to="/order/index"/><--路由匹配 exact exact是Route下的一條屬性,一般而言,react路由會匹配所有匹配到的路由組價,exact能夠使得路由的匹配更嚴格一些。exact的值為bool型,為true是表示嚴格匹配,為false時為正常匹配。--> <Route path="/table" getComponent={table} /> <Route path="/echarts" getComponent={echarts} /> <Route path="/editor" getComponent={editor} /> <Route path="/chat"
getComponent={chat} /> </Route> <Route path="/login" getComponent={Login} /> <Route path="/register" getComponent={Register} /> </Router>