How to use umi - 10 common examples

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,

className={styles.action}
          >
            
          
        
         {
            console.log(item, tabProps); // eslint-disable-line
            this.changeReadState(item, tabProps);
          }}
          locale={{
            emptyText: formatMessage({ id: 'component.noticeIcon.empty' }),
            clear: formatMessage({ id: 'component.noticeIcon.clear' }),
            loadedAll: formatMessage({ id: 'component.noticeIcon.loaded' }),
            loadMore: formatMessage({ id: 'component.noticeIcon.loading-more' }),
          }}
          onClear={onNoticeClear}
          onLoadMore={this.fetchMoreNotices}
          onPopupVisibleChange={onNoticeVisibleChange}
          loading={fetchingNotices}
          clearClose
        >

>
            
          
        
         {
            console.log(item, tabProps); // eslint-disable-line
            this.changeReadState(item, tabProps);
          }}
          locale={{
            emptyText: formatMessage({ id: 'component.noticeIcon.empty' }),
            clear: formatMessage({ id: 'component.noticeIcon.clear' }),
            loadedAll: formatMessage({ id: 'component.noticeIcon.loaded' }),
            loadMore: formatMessage({ id: 'component.noticeIcon.loading-more' }),
          }}
          onClear={onNoticeClear}
          onLoadMore={this.fetchMoreNotices}
          onPopupVisibleChange={onNoticeVisibleChange}
          loading={fetchingNotices}
          clearClose
        >

req: ctx.req || {},
        res: ctx.res || {},
        ...initialProps,
      });
      props = plugins.apply('initialProps', {
        initialValue: props,
      });
    } else {
      // message activeRoute or getInitialProps not found
      console.log(
        !activeRoute
          ? `${pathname} activeRoute not found`
          : `${pathname} activeRoute's getInitialProps function not found`,
      );
    }
    const rootContainer = plugins.apply('rootContainer', {
      initialValue: React.createElement(require('./router').default, props),
    });
    const htmlTemplateMap = {};
    return {
      htmlElement:
        activeRoute && activeRoute.path
          ? htmlTemplateMap[activeRoute.path]
          : '',
      rootContainer,
      matchPath: activeRoute && activeRoute.path,
      g_initialData: props,
    };
  };
  // using project react-dom version

initialValue: {},
      });
      // patch query object
      const location = history.location
        ? { ...history.location, query: getUrlQuery(history.location.search) }
        : {};
      props = await activeRoute.component.getInitialProps({
        route: activeRoute,
        isServer: true,
        location,
        // only exist in server
        req: ctx.req || {},
        res: ctx.res || {},
        ...initialProps,
      });
      props = plugins.apply('initialProps', {
        initialValue: props,
      });
    } else {
      // message activeRoute or getInitialProps not found
      console.log(
        !activeRoute
          ? `${pathname} activeRoute not found`
          : `${pathname} activeRoute's getInitialProps function not found`,
      );
    }
    const rootContainer = plugins.apply('rootContainer', {
      initialValue: React.createElement(require('./router').default, props),
    });
    const htmlTemplateMap = {};
    return {
      htmlElement:

function process_401(e, path) {
  const { extra, request } = e;
  const { options: { method } } = request;

  // GET /system/session
  // no notify , but redirect to /login
  if (method == SESSION_SYNC_REQ.verb && _.startsWith(path, SESSION_SYNC_REQ.uri)) {
    router.push('/login');
  }

  // POST /system/session
  // notify, but don't redirect to /login
  else if (method == SESSION_CREATE_REQ.verb && _.startsWith(path, SESSION_CREATE_REQ.uri)) {
    notifyError(
      extra.statusText,
      extra.status,
      request.url,
      extra.data? extra.data.message : extra.statusText,
      method,
    );
  }

  // other requests
  // notify, and redirect to /login

export function redirectTo(to, from) {
  if (isString(to) || isString(from)) {
    if (!from) {
      return router.push(to)
    }
    return router.push({
      pathname: to,
      query: {
        from
      }
    })
  }
  // to为完整的RouteData
  return router.push(to)
}

submit: async ({ username, password }) => {
    if (username !== '' && password !== '') {
      try {
        const result = await request('/user/login', {
          method: 'POST',
          requestType: 'json',
          data: {
            username,
            password,
          },
        });

        localStorage.setItem('token', result.data.token);
        return {
          status: true,
          message: formatMessage({ id: 'component.user.loginMethodPassword.success' }),
          data: [],
        };
      } catch (e) {
        // NOTE: API failed, using errorHandler

render: function render(props) {
        var childRoutes = renderRoutes(route.routes, extraProps, {
          location: props.location
        });

        if (route.component) {
          var compatProps = getCompatProps(_objectSpread({}, props, {}, extraProps));
          var newProps = plugins.apply('modifyRouteProps', {
            initialValue: _objectSpread({}, props, {}, extraProps, {}, compatProps),
            args: {
              route: route
            }
          });
          var Component = route.component; // eslint-disable-next-line no-undef

          if (__IS_BROWSER && Component.getInitialProps) {
            var initialProps = plugins.apply('modifyInitialProps', {
              initialValue: {}
            });
            Component = wrapWithInitialProps(Component, initialProps);
          }

          return _react.default.createElement(Component, _extends({}, newProps, {
            route: route