詳解react-router4 異步加載路由兩種方法

更新時間：2017年09月12日 11:45:53 作者：little_ab

本篇文章主要介紹了詳解react-router4 異步加載路由兩種方法，具有一定的參考價值，有興趣的可以了解一下

方法一：我們要借助bundle-loader來實現按需加載。

首先，新建一個bundle.js文件：

import React, { Component } from 'react'

export default class Bundle extends React.Component {

  state = {
    // short for "module" but that's a keyword in js, so "mod"
    mod: null
  }

  componentWillMount() {
    this.load(this.props)
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.load !== this.props.load) {
      this.load(nextProps)
    }
  }

  load(props) {
    this.setState({
      mod: null
    })
    props.load((mod) => {
      this.setState({
        // handle both es imports and cjs
        mod: mod.default ? mod.default : mod
      })
    })
  }

  render() {
    if (!this.state.mod)
      return false
    return this.props.children(this.state.mod)
  }
}

然后，在入口處使用按需加載：

// ...

// bundle模型用來異步加載組件
import Bundle from './bundle.js';

// 引入單個頁面（包括嵌套的子頁面）
// 同步引入
import Index from './app/index.js';
// 異步引入
import ListContainer from 'bundle-loader?lazy&name=app-[name]!./app/list.js';

const List = () => (
  <Bundle load={ListContainer}>
    {(List) => <List />}
  </Bundle>
)

// ...

  <HashRouter>
    <Router basename="/">
      <div>
        <Route exact path="/" component={Index} />
        <Route path="/list" component={List} />
      </div>
    </Router>
  </HashRouter>

// ...


webpack.config.js文件配置
output: {
  path: path.resolve(__dirname, './output'),
  filename: '[name].[chunkhash:8].bundle.js',
  chunkFilename: '[name]-[id].[chunkhash:8].bundle.js',
},

方法二：用原生的

Webpack 配置

首先在 webpack.config.js 的 output 內加上 chunkFilename

output: {
  path: path.join(__dirname, '/../dist/assets'),
  filename: 'app.js',
  publicPath: defaultSettings.publicPath,
  // 添加 chunkFilename
  chunkFilename: '[name].[chunkhash:5].chunk.js',
},

name 是在代碼里為創(chuàng)建的 chunk 指定的名字，如果代碼中沒指定則 webpack 默認分配 id 作為 name。

chunkhash 是文件的 hash 碼，這里只使用前五位。

在路由頁面

這里寫的是舊的沒按需要加載的路由寫法

ReactDOM.render(
 (
  <Router history={browserHistory}>
   {/* 主頁 */}
   <Route path="/" component={App}>
    {/* 默認 */}
    <IndexRoute component={HomePage} />

    {/* baidu */}
    <Route path="/baidu" component={BaiduPage}>
     <Route path="result" component={BaiduResultPage} />
     <Route path="frequency" component={BaiduFrequencyPage} />
    </Route>

    {/* 404 */}
    <Route path='/404' component={NotFoundPage} />
    
    {/* 其他重定向到 404 */}
    <Redirect from='*' to='/404' />
   </Route>
  </Router>
 ), document.getElementById('app')
);

我們需要讓路由動態(tài)加載組件，需要將 component 換成 getComponent

ReactDOM.render(
 (
  <Router history={browserHistory}>
   {/* 主頁 */}
   <Route path="/" component={App}>
    {/* 默認 */}
    <IndexRoute component={HomePage} />

    {/* baidu */}
    <Route path="/baidu"
　　　　　　　　　　getComponent(nextState, cb) 
　　　　　　　　　　{ require.ensure([], (require) => { cb(null, require('components/layer/HomePage')) }, 'HomePage')}>
     <Route path="result"   getComponent... />
     <Route path="frequency" getComponent... />
    </Route>
    {/* 404 */}
    <Route path='/404' getComponent... />
    {/* 其他重定向到 404 */}
    <Redirect path='*' onEnter: (_, replaceState) => replaceState(null, "/404") />
   </Route>
  </Router>
 ), document.getElementById('app')
);

getComponent

對應于以前的 component 屬性，但是這個方法是異步的，也就是當路由匹配時，才會調用這個方法。

這里面有個 require.ensure 方法

require.ensure(dependencies, callback, chunkName)

這是 webpack 提供的方法，這也是按需加載的核心方法。第一個參數是依賴，第二個是回調函數，第三個就是上面提到的 chunkName，用來指定這個 chunk file 的 name。

如果需要返回多個子組件，則使用 getComponents 方法，將多個組件作為一個對象的屬性通過 cb 返回出去即可。這個在官方示例也有，但是我們這里并不需要，而且根組件是不能返回多個子組件的，所以使用 getComponent。

當改寫之后，我們需要把這個重定向的路由單獨拆出來，也就是 * 這個路由，我們上面已經為他創(chuàng)建了一個 redirect 目錄。這里使用到 onEnter 方法，然后在這個方法里改變路由狀態(tài)，調到另外的路由，實現 redirect ：

/redirect/index.js

module.exports = {
 path: '*',
 onEnter: (_, replaceState) => replaceState(null, "/404")
}

The root route must render a single element

跟著官方示例和上面碼出來之后，可能頁面并沒有渲染出來，而是報 The root route must render a single element 這個異常，這是因為 module.exports 和 ES6 里的 export default 有區(qū)別。

如果你是使用 es6 的寫法，也就是你的組件都是通過 export default 導出的，那么在 getComponent 方法里面需要加入.default。

getComponent(nextState, cb) {
  require.ensure([], (require) => {
   // 在后面加 .default
   cb(null, require('components/layer/ReportPage')).default
  }, 'ReportPage')
}

如果你是使用 CommonJS 的寫法，也就是通過 module.exports 導出的，那就無須加 .default 了。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: