# 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 inumi-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 tolocale
whilesingular: 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