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',
},


方法二：用原生的
摘錄：https://segmentfault.com/a/1190000007141049

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 是在代碼里為創建的 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') );
我們需要讓路由動態加載組件，需要將 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。

當改寫之后，我們需要把這個重定向的路由單獨拆出來，也就是 * 這個路由，我們上面已經為他創建了一個 redirect 目錄。這里使用到 onEnter 方法，然后在這個方法里改變路由狀態，調到另外的路由，實現 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 有區別。

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

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

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