小編給大家分享一下react-router4中異步加載路由的方法有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)是一家專注于成都做網(wǎng)站、成都網(wǎng)站設(shè)計與策劃設(shè)計,高州網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)10年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:高州等地區(qū)。高州做網(wǎng)站價格咨詢:18980820575

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

首先，新建一個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 = () => (
  
    {(List) => }
  
)

// ...

  
    
      

        
        
      
    
  

// ...


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 內(nèi)加上 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 默認(rèn)分配 id 作為 name。

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

在路由頁面

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

ReactDOM.render(
 (
  
   {/* 主頁 */}
   
    {/* 默認(rèn) */}
    

    {/* baidu */}
    
     
     
    

    {/* 404 */}
    
    
    {/* 其他重定向到 404 */}
    
   
  
 ), document.getElementById('app')
);

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

ReactDOM.render(
 (
  
   {/* 主頁 */}
   
    {/* 默認(rèn) */}
    

    {/* baidu */}
     { cb(null, require('components/layer/HomePage')) }, 'HomePage')}>
     
     
    
    {/* 404 */}
    
    {/* 其他重定向到 404 */}
     replaceState(null, "/404") />
   
  
 ), document.getElementById('app')
);

getComponent

對應(yīng)于以前的 component 屬性，但是這個方法是異步的，也就是當(dāng)路由匹配時，才會調(diào)用這個方法。

這里面有個 require.ensure 方法

require.ensure(dependencies, callback, chunkName)

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

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

當(dāng)改寫之后，我們需要把這個重定向的路由單獨拆出來，也就是 * 這個路由，我們上面已經(jīng)為他創(chuàng)建了一個 redirect 目錄。這里使用到 onEnter 方法，然后在這個方法里改變路由狀態(tài)，調(diào)到另外的路由，實現(xiàn) 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 導(dǎo)出的，那么在 getComponent 方法里面需要加入.default。

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

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

以上是“react-router4中異步加載路由的方法有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！