UmiJS

API

Route

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();

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-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-locale';

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

Components from react-intl

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

Example:

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

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

Methods from react-intl

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

Example:

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


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

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.

Edit this page on GitHub