API
路由
umi/link
通过声明的方式做路由跳转。
例子:
import Link from 'umi/link';
export default () => {
<div>
/* 普通使用 */
<Link to="/list">Go to list page</Link>
/* 带参数 */
<Link to="/list?a=b">Go to list page</Link>
/* 包含子组件 */
<Link to="/list?a=b"><button>Go to list page</button></Link>
</div>
}
umi/router
通过编程的方式做路由切换,包含以下 4 个 API 。
router.push(path)
推一个新的页面到 history 里。
例子:
import router from 'umi/router';
// 普通跳转,不带参数
router.push('/list');
// 带参数
router.push('/list?a=b');
router.push({
pathname: '/list',
query: {
a: 'b',
},
});
# 对象且不包含 pathname 会报错
router.push({
query: {}
});
router.replace(path)
替换当前页面,参数和 router.go(n)
往前或往后跳指定页数。
例子:
import router from 'umi/router';
router.go(-1);
router.go(2);
router.goBack()
后退一页。
例子:
import router from 'umi/router';
router.goBack();
umi/navlink
详见:https://reacttraining.com/react-router/web/api/NavLink
umi/redirect
重定向用。
例子:
import Redirect from 'umi/redirect';
<Redirect to="/login" />;
详见:https://reacttraining.com/react-router/web/api/Redirect
umi/prompt
例子:
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}?`);
}}
/>
</>
);
};
详见:https://reacttraining.com/react-router/web/api/Prompt
umi/withRouter
详见:https://reacttraining.com/react-router/web/api/withRouter
Locale
umi-plugin-locale
无需单独引入
umi-plugin-locale
依赖,当你使用umi-plugin-react
时,就已经被自动引入了。
setLocale(lang, realReload = true)
指定当前使用语言,realReload = false
时,可以无刷新更新多语言设置。
举例:
import { setLocale } from 'umi-plugin-react/locale';
// 十秒后设置当前语言为en-US
setTimeout(() => {
setLocale('en-US');
}, 10000);
getLocale()
获取当前使用语言
举例:
import { getLocale } from 'umi-plugin-react/locale';
// 打印当前使用语言
console.log(getLocale());
使用 react-intl 提供的组件
你可以直接从 umi-plugin-react/locale
引入由 react-intl 提供的如下组件:
import {
FormattedDate,
FormattedTime,
FormattedRelative,
FormattedNumber,
FormattedPlural,
FormattedMessage,
FormattedHTMLMessage,
} from 'umi-plugin-react/locale';
export default () => {
return <FormattedMessage id="TEST_TITLE" />;
};
使用 react-intl 提供的方法
你可以直接从 umi-plugin-react/locale
引入由 react-intl 提供的如下方法:
import {
formatDate,
formatTime,
formatRelative,
formatNumber,
formatPlural,
formatMessage,
formatHTMLMessage
} from 'umi-plugin-react/locale';
export default () => {
return <p>{formatMessage({ id: "TEST_TITLE" })}</p>;
}
目录及约定
.
├── dist/
├── mock/
└── src/
├── layouts/index.js
├── pages/
└── locales // 多语言文件存放目录,里面的文件会被umi自动读取
├── zh-CN.js
└── en-US.js
├── .umirc.js
├── .env
└── package.json
如果
.umirc.js
里配置了singular: true
,locales
要改成locale
多语言文件约定
多语言文件的命名规范:<lang><分割符(通过 baseSeparator 配置)><COUNTRY>.js
多语言文件的内容规范:键-值组成的字面量,如下:
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",
};
性能
umi/dynamic
动态加载组件,基于 react-loadable 实现。
dynamic(options)
例子:
import dynamic from 'umi/dynamic';
// 延时 1s 渲染的组件。
const App = dynamic({
loader: () => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(() => <div>I will render after 1s</div>);
}, /* 1s */1000);
});
},
});
// 或者用 async 语法
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>;
},
});
构建
umi/babel
让用户可基于 umi 的 babel 配置进行扩展。
服务器端渲染
umi-server
$ npm install umi-server -S