import Center from 'page/center';
import Data from 'page/data';

function App(){
 return (
  <Router>
   <Switch>
   <Route exact path="/" render={() => (<Redirect to="/center" />)} />
   <Route path="/data" component={Data} />
   <Route path="/center" component={Center} />
   <Route render={() => <h1 style={{ textAlign: 'center', marginTop: '160px', color:'rgba(255, 255, 255, 0.7)' }}>页面不见了</h1>} />
   </Switch>
  </Router>
 );
}

import React from 'react';
export const asyncComponent = loadComponent => (
 class AsyncComponent extends React.Component {
  constructor(...args){
   super(...args);
   this.state = {
    Component: null,
   };
   this.hasLoadedComponent = this.hasLoadedComponent.bind(this);
  }
  componentWillMount() {
   if(this.hasLoadedComponent()){
    return;
   }
   loadComponent()
    .then(module => module.default "htmlcode">

this.state = {
 Component: null,
};


这里的null，主要用于判断异步组件是否已经加载。


"htmlcode">

output: {
 path: config.build.assetsRoot,
 filename: utils.assetsPath('js/[name].[chunkhash].js'),
 chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
}


在输出项中，增加chunkFilename即可。
四、小结
自定义高阶组件的好处，是可以按最少的改动，来优化已有的旧项目。


像上面的例子，只需要改变import组件的方式即可。花最少的代价，就可以得到页面性能的提升。


 其实，react-loadable也是按这种思路去实现的，只不过增加了很多附属的功能点而已。


以上所述是小编给大家介绍的React router动态加载组件之适配器模式的应用，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！