How to use the umi/dynamic function in umi

import { Component } from 'react';
import dynamic from 'umi/dynamic';

const delay = timeout => new Promise(resolve => setTimeout(resolve, timeout));

const A = dynamic(async function() {
  await delay(/* 1s */ 1000);
  return () =&gt; <div>A rendered after 1s</div>;
});

const B = dynamic(
  async function() {
    await delay(/* 1s */ 1000);
    return () =&gt; <div>B rendered after 1s</div>;
  },
  {
    loading() {
      return <div>Custome Loading...</div>;
    },
  },
);

import { Component } from 'react';
import dynamic from 'umi/dynamic';

const delay = timeout => new Promise(resolve => setTimeout(resolve, timeout));

const A = dynamic(async function() {
  await delay(/* 1s */ 1000);
  return () =&gt; <div>A rendered after 1s</div>;
});

const B = dynamic(
  async function() {
    await delay(/* 1s */ 1000);
    return () =&gt; <div>B rendered after 1s</div>;
  },
  {
    loading() {
      return <div>Custome Loading...</div>;
    },
  },
);

export default class Dynamic extends Component {
  constructor(props) {
    super(props);
    this.state = {
      A: false,

import { Router as DefaultRouter, Route, Switch } from 'react-router-dom';
import dynamic from 'umi/dynamic';
import renderRoutes from 'umi/_renderRoutes';


let Router = require('dva/router').routerRedux.ConnectedRouter;

let routes = [
  {
    "path": "/",
    "component": dynamic({ loader: () => import(/* webpackChunkName: "layouts__index" */'../../layouts/index.js') }),
    "routes": [
      {
        "path": "/:id",
        "exact": true,
        "component": dynamic({ loader: () => import(/* webpackChunkName: "p__$id__index" */'../$id/index.js') })
      },
      {
        "path": "/",
        "exact": true,
        "component": dynamic({ loader: () => import(/* webpackChunkName: "p__index" */'../index.js') })
      },
      {
        "component": () => React.createElement(require('/Users/muthu/Desktop/js-interview-online-master/node_modules/umi-build-dev/lib/plugins/404/NotFound.js').default, { pagesPath: 'src/pages', hasRoutesInConfig: false })
      }
    ]
  },
  {
    "component": () => React.createElement(require('/Users/muthu/Desktop/js-interview-online-master/node_modules/umi-build-dev/lib/plugins/404/NotFound.js').default, { pagesPath: 'src/pages', hasRoutesInConfig: false })
  }
];
window.g_plugins.applyForEach('patchRoutes', { initialValue: routes });

function getTestCaseRunner(loader) {
  return dynamic({
    loader() {
      return loader()
        .then(toCases)
        .then(cases => {
          class CaseRunner extends React.Component {
            static propTypes = {
              visible: PropTypes.bool,
              onClose: PropTypes.func,
              code: PropTypes.string,
              inputFuncName: PropTypes.string,
              height: PropTypes.number
            }

            constructor(props) {
              super(props)

function getCodeContent(loader) {
  return dynamic({
    loader() {
      return loader()
        .then(toContent)
        .then(content => {
          function Content(props) {
            const { value, onChange } = props

            useFirstRunHook(onChange)

            return (