UmiJS介绍--api（八）

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

3.构建

umi/babel
让用户可基于 umi 的 babel 配置进行扩展。

来源https://umijs.org/zh/guide/with-dva.html

最后

以上就是爱听歌小蚂蚁为你收集整理的UmiJS介绍--api（八）的全部内容，希望文章能够帮你解决UmiJS介绍--api（八）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。