详解react-router4 异步加载路由两种方法

2023-09-24 20:57:08 291

方法一：我们要借助bundle-loader来实现按需加载。

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

importReact,{Component}from'react'

exportdefaultclassBundleextendsReact.Component{

state={
//shortfor"module"butthat'sakeywordinjs,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({
//handlebothesimportsandcjs
mod:mod.default?mod.default:mod
})
})
}

render(){
if(!this.state.mod)
returnfalse
returnthis.props.children(this.state.mod)
}
}

然后，在入口处使用按需加载：

//...

//bundle模型用来异步加载组件
importBundlefrom'./bundle.js';

//引入单个页面（包括嵌套的子页面）
//同步引入
importIndexfrom'./app/index.js';
//异步引入
importListContainerfrom'bundle-loader?lazy&name=app-[name]!./app/list.js';

constList=()=>(

{(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内加上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(
(

{/*主页*/}

{/*默认*/}


{/*baidu*/}





{/*404*/}


{/*其他重定向到404*/}



),document.getElementById('app')
);

我们需要让路由动态加载组件，需要将component换成getComponent

ReactDOM.render(
(

{/*主页*/}

{/*默认*/}


{/*baidu*/}
{cb(null,require('components/layer/HomePage'))},'HomePage')}>



{/*404*/}

{/*其他重定向到404*/}
replaceState(null,"/404")/>


),document.getElementById('app')
);

getComponent

对应于以前的component属性，但是这个方法是异步的，也就是当路由匹配时，才会调用这个方法。

这里面有个require.ensure方法

require.ensure(dependencies,callback,chunkName)

这是webpack提供的方法，这也是按需加载的核心方法。第一个参数是依赖，第二个是回调函数，第三个就是上面提到的chunkName，用来指定这个chunkfile的name。

如果需要返回多个子组件，则使用getComponents方法，将多个组件作为一个对象的属性通过cb返回出去即可。这个在官方示例也有，但是我们这里并不需要，而且根组件是不能返回多个子组件的，所以使用getComponent。

当改写之后，我们需要把这个重定向的路由单独拆出来，也就是*这个路由，我们上面已经为他创建了一个redirect目录。这里使用到onEnter方法，然后在这个方法里改变路由状态，调到另外的路由，实现redirect：

/redirect/index.js

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

Therootroutemustrenderasingleelement

跟着官方示例和上面码出来之后，可能页面并没有渲染出来，而是报Therootroutemustrenderasingleelement这个异常，这是因为module.exports和ES6里的exportdefault有区别。

如果你是使用es6的写法，也就是你的组件都是通过exportdefault导出的，那么在getComponent方法里面需要加入.default。

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

如果你是使用CommonJS的写法，也就是通过module.exports导出的，那就无须加.default了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

详解react-router4 异步加载路由两种方法

热门推荐

随机推荐