How to use the choerodon-front-boot.asyncRouter function in choerodon-front-boot

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import { asyncRouter, nomatch } from 'choerodon-front-boot';

const index = asyncRouter(() => (import('./MailSetting')));

const Index = ({ match }) => (
  
);

export default Index;

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import { asyncRouter, nomatch } from 'choerodon-front-boot';

const index = asyncRouter(() => import('./Saga'));

const Index = ({ match }) => (
  
);

export default Index;

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import { asyncRouter, nomatch } from 'choerodon-front-boot';

const index = asyncRouter(() => import('./registerOrganization'));

const Index = ({ match }) => (
  
);

export default Index;

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import { asyncRouter, nomatch } from 'choerodon-front-boot';


const index = asyncRouter(() => import('./Project'), () => import('../../../stores/organization/project'));

const Index = ({ match }) => (
  
);

export default Index;

import React from 'react';
import { Route, Switch, } from 'react-router-dom';
import { asyncRouter, nomatch } from 'choerodon-front-boot';

const index = asyncRouter(() => import('./MicroService'));

const Index = ({ match }) => (
  
);

export default Index;

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import { asyncRouter, nomatch } from 'choerodon-front-boot';

const home = asyncRouter(() => import('./UserInfo'));

const index = ({ match }) => (
  
);

export default index;

import React from 'react';
import {
  Route,
  Switch,
} from 'react-router-dom';
import { asyncRouter, nomatch } from 'choerodon-front-boot';

const DeploymentConfig = asyncRouter(
  () => import('./deploymentConfigHome'),
  () => import('../../../stores/project/deploymentConfig')
);

const DeploymentConfigIndex = ({ match }) => (
  
);

export default DeploymentConfigIndex;

const Container = asyncRouter(() => import('./project/container'));
const AppRelease = asyncRouter(() => import('./project/appRelease'));
const Branch = asyncRouter(() => import('./project/branch'));
const MergeRequest = asyncRouter(() => import('./project/mergeRequest'));
const AppTag = asyncRouter(() => import('./project/appTag'));
const Repository = asyncRouter(() => import('./project/repository'));
const EnvOverview = asyncRouter(() => import('./project/envOverview'));
const DeployOverview = asyncRouter(() => import('./project/deployOverview'));
const Certificate = asyncRouter(() => import('./project/certificate'));
const Reports = asyncRouter(() => import('./project/reports'));
const DevConsole = asyncRouter(() => import('./project/devConsole'));
const ConfigMap = asyncRouter(() => import('./project/configMap'));
const Secret = asyncRouter(() => import('./project/secret'));
const Elements = asyncRouter(() => import('./project/elements'));
const PipelineIndex = asyncRouter(() => import('./project/pipeline'));
const DeploymentConfig = asyncRouter(() => import('./project/deploymentConfig'));
const PipelineRecord = asyncRouter(() => import('./project/pipelineRecord'));
const CodeQuality = asyncRouter(() => import('./project/codeQuality'));
const Notifications = asyncRouter(() => import('./project/notifications'));

@inject('AppState')
class DEVOPSIndex extends React.Component {
  render() {
    const { match, AppState } = this.props;
    const language = AppState.currentLanguage;
    const IntlProviderAsync = asyncLocaleProvider(language, () =>
      import(`../locale/${language}`),
    );

    /**
     * 从实例详情页面跳转到实例页面或容器不重新加载
     * 从详情页面跳到其他页面需要重新加载

const InstancesIndex = asyncRouter(() => import('./project/instances'));
const DeploymentApp = asyncRouter(() => import('./project/deploymentApp'));
const NetworkConfig = asyncRouter(() => import('./project/networkConfig'));
const Domain = asyncRouter(() => import('./project/domain'));
const Container = asyncRouter(() => import('./project/container'));
const AppRelease = asyncRouter(() => import('./project/appRelease'));
const Branch = asyncRouter(() => import('./project/branch'));
const MergeRequest = asyncRouter(() => import('./project/mergeRequest'));
const AppTag = asyncRouter(() => import('./project/appTag'));
const Repository = asyncRouter(() => import('./project/repository'));
const EnvOverview = asyncRouter(() => import('./project/envOverview'));
const DeployOverview = asyncRouter(() => import('./project/deployOverview'));
const Certificate = asyncRouter(() => import('./project/certificate'));
const Reports = asyncRouter(() => import('./project/reports'));
const DevConsole = asyncRouter(() => import('./project/devConsole'));
const ConfigMap = asyncRouter(() => import('./project/configMap'));
const Secret = asyncRouter(() => import('./project/secret'));
const Elements = asyncRouter(() => import('./project/elements'));
const PipelineIndex = asyncRouter(() => import('./project/pipeline'));
const DeploymentConfig = asyncRouter(() => import('./project/deploymentConfig'));
const PipelineRecord = asyncRouter(() => import('./project/pipelineRecord'));
const CodeQuality = asyncRouter(() => import('./project/codeQuality'));
const Notifications = asyncRouter(() => import('./project/notifications'));

@inject('AppState')
class DEVOPSIndex extends React.Component {
  render() {
    const { match, AppState } = this.props;
    const language = AppState.currentLanguage;
    const IntlProviderAsync = asyncLocaleProvider(language, () =>
      import(`../locale/${language}`),
    );

import React from 'react';
import {
  Route,
  Switch,
} from 'react-router-dom';
import { asyncRouter, nomatch } from 'choerodon-front-boot';

const REPORTSHOME = asyncRouter(() => import('./Home'), () => import('../../../stores/project/reports'));
const SUBMISSION = asyncRouter(() => import('./Submission'), () => import('../../../stores/project/reports'));
const DeployDuration = asyncRouter(() => import('./DeployDuration'), () => import('../../../stores/project/reports'));
const DeployTimes = asyncRouter(() => import('./DeployTimes'), () => import('../../../stores/project/reports'));
const BUILDNUMBER = asyncRouter(() => import('./BuildNumber'), () => import('../../../stores/project/reports'));
const BUILDDURATION = asyncRouter(() => import('./BuildDuration'), () => import('../../../stores/project/reports'));
const CodeQuality = asyncRouter(() => import('./CodeQuality'), () => import('../../../stores/project/reports'));

const ReportsIndex = ({ match }) => (