API
基本API
- dynamic动态加载组件(通常搭配import语法)
使用场景：组件体积太大，不适合直接计入bundle，以免影响首屏加载速度。例如：某组件 HugeA 包含巨大的实现 / 依赖了巨大的三方库，且该组件 HugeA 的使用不在首屏显示范围内，可被单独拆出。这时候，dynamic 就该上场了。
// 封装异步组件 AsyncHugeA
import {
dynamic } from 'umi';
export default dynamic({
loader: async function(){
const {
default: HugeA } = await import(/* webpackChunkName: "" */'path/to/component')
return HugeA
}
})
// 使用异步组件
import React from 'react';
import AsyncHugeA from './AsyncHugeA';
// 像使用普通组件一样即可
// dynamic 为你做:
// 1. 异步加载该模块的 bundle
// 2. 加载期间 显示 loading（可定制）
// 3. 异步组件加载完毕后，显示异步组件
export default () => {
return <AsyncHugeA />;
}
- history
des: 1.获取当前路由信息;2.用于路由跳转;3.用于路由监听
import {
history } from 'umi';
// 路由信息
console.log(history.action) // 跳转方式
console.log(history.location) // 携带的参数等
// 路由跳转 （push、go、goBack、replace）
history('/list')
history.push({
pathname:'/list',
query:{
a:'n'
}
})
// 路由监听
const unlisten = history.listen((location, action) => {
console.log( location.pathname )
})
unlisten() // 取消监听
- plugin
des: 主要在插件利用，项目代码中一般用不到
路由
- Link
import {
Link } from 'umi';
export default () => {
return (
<div>
{
/* 点击跳转到指定 /about 路由 */}
<Link to="/about">About</Link>
{
/* 点击跳转到指定 /courses 路由，
附带 query { sort: 'name' }
*/}
<Link to="/courses?sort=name">Courses</Link>
{
/* 点击跳转到指定 /list 路由，
附带 query: { sort: 'name' }
附带 hash: 'the-hash'
附带 state: { fromDashboard: true }
*/}
<Link
to={
{
pathname: "/list",
search: "?sort=name",
hash: "#the-hash",
state: {
fromDashboard: true },
}}
>
List
</Link>
{
/* 点击跳转到指定 /profile 路由，
附带所有当前 location 上的参数
*/}
<Link
to={
location => {
return {
...location, pathname: "/profile" };
}}
/>
{
/* 点击跳转到指定 /courses 路由，
但会替换当前 history stack 中的记录
*/}
<Link to="/courses" replace />
{
/*
innerRef 允许你获取基础组件（这里应该就是 a 标签或者 null）
*/}
<Link
to="/courses"
innerRef={
node => {
// `node` refers to the mounted DOM element
// or null when unmounted
}}
/>
</div>
);
};
- navLink
特殊版本的Link。当指定路由(to=指定路由)命中时，可以附着特定样式
import {
NavLink } from 'umi';
export default () => {
return (
<div>
{
/* 和 Link 等价 */}
<NavLink to="/about">About</NavLink>
{
/* 当前路由为 /faq 时，附着 class selected */}
<NavLink to="/faq" activeClassName="selected">
FAQs
</NavLink>
{
/* 当前路由为 /faq 时，附着 style */}
<NavLink
to="/faq"
activeStyle={
{
fontWeight: "bold",
color: "red",
}}
>
FAQs
</NavLink>
{
/* 当前路由完全匹配为 /profile 时，附着 class */}
<NavLink exact to="/profile" activeClassName="selected">
Profile
</NavLink>
{
/* 当前路由为 /profile/ 时，附着 class */}
<NavLink strict to="/profile/" activeClassName="selected">
Profile
</NavLink>
{
/* 当前路由为 /profile，并且 query 包含 name 时，附着 class */}
<NavLink
to="/profile"
exact
activeClassName="selected"
isActive={
(match, location) => {
if (!match) {
return false;
}
return location.search.includes("name");
}}
>
Profile
</NavLink>
</div>
);
};
- Prompt
des: 提供一个用户离开页面时的选择(alert)
import {
Prompt } from 'umi';
export default () => {
return (
<div>
{
/* 用户离开页面时提示一个选择 */}
<Prompt message="你确定要离开么？" />
{
/* 用户要跳转到首页时，提示一个选择 */}
<Prompt
message={
location => {
return location.pathname !== "/" ? true : `您确定要跳转到首页么？`;
}}
/>
{
/* 根据一个状态来确定用户离开页面时是否给一个提示选择 */}
<Prompt when={
formIsHalfFilledOut} message="您确定半途而废么？" />
</div>
);
};
- withRouter
des:高阶组件，可以通过withRouter获取到history、location、match对象
import {
withRouter } from 'umi';
export default withRouter(({
history, location, match}) => {
return (
....
)
})
-
useHistory
des:hooks,获取history对象 -
useLocation
des:hooks,获取location对象 -
useParams
des:hooks,获取params对象。params对象为动态路由里(eg:/uses/:id,注意：/users?id=11231231 这种形式的参数无法获取到，此类传参使用useLocation中的query获取)的参数键值对 -
useRouteMatch
des:获取当前路由的匹配信息
import {
useRouteMatch } from 'umi';
const match = useRouteMatch();
// match = {
// isExact: true,
// params: {},
// path: '',
// url: '',
// }