《Umijs》三、页面跳转与HTML模板

在 umi 中，页面之间的跳转由两种方式：声明式与命令式。

一、页面跳转

1. 声明式

import { Link } from 'umi';

export default () => <Link to="/">Go home</Link>;

2. 命令式

import { history } from 'umi';

function goHome() {
  history.push('/');
}

也可以直接从组件的属性中获取 history：

export default (props: any) => (
  <Button onClick={() => props.history.push('/')}>Go Home</Button>
);

二、HTML 模板

新建 src/pages/document.ejs，如果该文件存在，则作为默认模板：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Your App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

模板中可以通过 context 来获取到 umi 提供的变量，如

route：路由信息，需要打包出多个静态 HTML 时有效
config：用户配置信息

<link
  rel="icon"
  type="image/x-icon"
  href="<%= context.config.publicPath %>favicon.png"
/>>