API

Route

umi/link

Navigation via route declaration.

Example:

import Link from 'umi/link';

export default () => {
  <div>
    /* Normal use */
    <Link to="/list">Go to list page</Link>

    /* With query string */
    <Link to="/list?a=b">Go to list page</Link>

    /* Include child component */
    <Link to="/list?a=b"><button>Go to list page</button></Link>
  </div>
}

umi/router

Programmatic navigation via four router methods

router.push(path)

Add one entry to the browser's history.

Example:

import router from 'umi/router';

// Normal navigation without query string
router.push('/list');

// With query string
router.push('/list?a=b');
router.push({
  pathname: '/list',
  query: {
    a: 'b',
  },
});
# Object without property `pathname` will throw an error
router.push({
  query: {}
});

router.replace(path)

Replace current page. Accept same parameter as router.push()

router.go(n)

Move back or forward through history.

Example:

import router from 'umi/router';

router.go(-1);
router.go(2);

router.goBack()

Move backward.

Example:

import router from 'umi/router';
router.goBack();

umi/navlink

See: https://reacttraining.com/react-router/web/api/NavLink

umi/redirect

Redirection.

Example:

import Redirect from 'umi/redirect';
<Redirect to="/login" />;

See: https://reacttraining.com/react-router/web/api/Redirect

umi/prompt

Example.

import Prompt from 'umi/prompt';

export default () => {
  return (
    <>
      <h1>Prompt</h1>
      <Prompt
        when={true}
        message={location => {
          return window.confirm(`confirm to leave to ${location.pathname}?`);
        }}
      />
    </>
  );
};

See：https://reacttraining.com/react-router/web/api/Prompt

umi/withRouter

See: https://reacttraining.com/react-router/web/api/withRouter

Locale

umi-plugin-locale

You don't have to import umi-plugin-locale individually, it is included in umi-plugin-react.

setLocale(lang, realReload = true)

Specify the application language. While realReload = false, locale can be set without reload the whole application.

Example:

import { setLocale } from 'umi-plugin-react/locale';

// Set the language to English after 10 seconds
setTimeout(() => {
  setLocale('en-US');
}, 10000);

getLocale()

Get the current using language

Example:

import { getLocale } from 'umi-plugin-react/locale';

// print the current using language
console.log(getLocale());

Components from react-intl

Components exposed via react-intl can be used from umi-plugin-react/locale as well.

Example:

import {
  FormattedDate,
  FormattedTime,
  FormattedRelative,
  FormattedNumber,
  FormattedPlural,
  FormattedMessage,
  FormattedHTMLMessage,
} from 'umi-plugin-react/locale';

export default () => {
  return <FormattedMessage id="TEST_TITLE" />;
};

Methods from react-intl

Methods exposed via react-intl can be used from umi-plugin-react/locale as well.

Example:

import {
  formatDate,
  formatTime,
  formatRelative,
  formatNumber,
  formatPlural,
  formatMessage,
  formatHTMLMessage
} from 'umi-plugin-react/locale';


export default () => {
  return <p>{formatMessage({ id: "TEST_TITLE" })}</p>;
}

Directory and Convention

.
├── dist/
├── mock/
└── src/
    ├── layouts/index.js
    ├── pages/
    └── locales               // lang files will be loaded by umi
        ├── zh-CN.js
        └── en-US.js
├── .umirc.js
├── .env
└── package.json

locales should be changed to locale while singular: true is specified in .umirc.js.

Language and Convention

Rule of language file naming：<lang><separator（via baseSeparator in .umirc）><COUNTRY>.js

Rule of language file content: key-value pattern

zh-CN.js

export default {
  WELCOME_TO_UMI_WORLD: '{name}，欢迎光临umi的世界',
};

en-US.js

export default {
  WELCOME_TO_UMI_WORLD: "{name}, welcome to umi's world",
};

Performance

umi/dynamic

Dynamically loading components based on react-loadable.

dynamic(options)

Example:

import dynamic from 'umi/dynamic';

// Render component with 1s delay
const App = dynamic({
  loader: () => {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(() => <div>I will render after 1s</div>);
      }, /* 1s */1000);
    }));
  },
});

// Or use `async function`
const delay = (timeout) => new Promise(resolve => setTimeout(resolve, timeout));
const App = dynamic({
  loader: async function() {
    await delay(/* 1s */1000);
    return () => <div>I will render after 1s</div>;
  },
});

Build

umi/babel

Make umi's babel configuration extensible.

Server-Side Render

umi-server

$ npm install umi-server -S