react 动态修改路由_React 动态路由

React 项目通过create-react-app 命令创建，版本为2.0.3.

封装一个高阶组件，用来实现将普通的组件转换成动态组件import React from \\\\\\\'react\\\\\\\'

const AsyncComponent = loadComponent => (

class AsyncComponent extends React.Component {

state = {

Component: null,

}

componentWillMount() {

if (this.hasLoadedComponent()) {

return;

}

loadComponent()

.then(module => module.default)

.then((Component) => {

this.setState({Component});

})

.catch((err) => {

console.error(`Cannot load component in `);

throw err;

});

}

hasLoadedComponent() {

return this.state.Component !== null;

}

render() {

const {Component} = this.state;

return (Component) ? : null;

}

}

);

export default AsyncComponent;

修改之前的路由配置import React from \\\"react\\\";

import {

Route

} from \\\'react-router-dom\\\'

import asyncComponent from \\\'./asyncComponent\\\'

//import Map from \\\"../pages/Map\\\";

const MapTest = asyncComponent(

() => import(/* webpackChunkName: \\\"map_test\\\" */\\\'../pages/Map\\\')

)

export default (

);

配置完成后从其他模块切换到map会发现请求了 map_test.trunk.js