UmiJS介绍--api（八）

最新推荐文章于 2025-06-08 18:09:27 发布

原创最新推荐文章于 2025-06-08 18:09:27 发布 · 1w 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#umijs #api

UmiJs 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了UmiJS的API用法，涵盖了路由的umi/link、umi/router及其各种方法，如push、replace、goBack等。还提到了性能优化的umi/dynamic，以及构建相关的umi/babel配置扩展。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.路由

1.1 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>
}

1.2 umi/router
通过编程的方式做路由切换，包含以下 4 个 API 。
1.2.1 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: {}
});

1.2.2 router.replace(path)
替换当前页面，参数和 router.push() 相同。

1.2.3 router.go(n)
往前或往后跳指定页数。

import router from 'umi/router';

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

1.2.4 router.goBack()

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

1.3 umi/navlink
详见：https://reacttraining.com/react-router/web/api/NavLink

<NavLink
  to="/faq"
  activeStyle={{
    fontWeight: "bold",
    color: "red"
  }}
>
  FAQs
</NavLink>

1.4 umi/redirect
重定向用。
详见：https://reacttraining.com/react-router/web/api/Redirect

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

1.5 umi/prompt
详见：https://reacttraining.com/react-router/web/api/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}?`);
        }}
      />
    </>
  );
}

1.5 umi/withRouter
详见：https://reacttraining.com/react-router/web/api/withRouter

import withRouterfrom 'umi/withRouter';
export default withRouter(MyComponent)

2.性能

umi/dynamic
动态加载组件，基于 react-loadable 实现

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>;
  },
});