Umi3快速上手（三）
写在前面
本人也是近期开始接触的umi3的，看了很多文档，自己也做了些总结，本文也主要借鉴了官方文档，还有一篇语雀上的教程
创建页面
可以用umi g page about 命令创建页面，这样会自动新建，页面的 js 文件和 css 文件。使用 --typescript --less 来选择性的指定文件类型。例如：
$ umi g page about --typescript --less
Write: src/pages/about.tsx
Write: src/pages/about.less
$ umi g page more --typescript --less
Write: src/pages/more.tsx
Write: src/pages/more.less
然后在config/config.ts中配置路由（执行上面那个指令会自动创建，如果没有，就手动创建）
配置路由
在 Umi 中，应用都是单页应用，页面地址的跳转都是在浏览器端完成的，不会重新请求服务端获取 html，html 只在应用初始化时加载一次。所有页面由不同的组件构成，页面的切换其实就是不同组件的切换，你只需要在配置中把不同的路由路径和对应的组件关联上。
path
- Type:
string
配置可以被 path-to-regexp@^1.7.0 理解的路径通配符。
component
- Type:
string
配置 location 和 path 匹配后用于渲染的 React 组件路径。可以是绝对路径，也可以是相对路径，如果是相对路径，会从 src/pages 开始找起。
如果指向 src 目录的文件，可以用 @，也可以用 ../。比如 component: '@/layouts/basic'，或者 component: '../layouts/basic'，推荐用前者。
exact
- Type:
boolean - Default:
false
表示是否严格匹配，即 location 是否和 path 完全对应上。
例如：
export default {
routes: [
// url 为 /one/two 时匹配失败
{ path: '/one', exact: true },
// url 为 /one/two 时匹配成功
{ path: '/one' },
{ path: '/one', exact: false },
],
}
routes
配置子路由，通常在需要为多个路径增加 layout 组件时使用。
比如：
export default {
routes: [
{ path: '/login', component: 'login' },
{
path: '/',
component: '@/layouts/index',
routes: [
{ path: '/list', component: 'list' },
{ path: '/admin', component: 'admin' },
],
},
],
}
然后在 src/layouts/index 中通过 props.children 渲染子路由，
export default (props) => {
return { props.children };
}
这样，访问 /list 和 /admin 就会带上 src/layouts/index 这个 layout 组件。
redirect
- Type:
string
配置路由跳转。
比如：
export default {
routes: [
{ exact: true, path: '/', redirect: '/list' },
{ exact: true, path: '/list', component: 'list' },
],
}
访问 / 会跳转到 /list，并由 src/pages/list 文件进行渲染。
wrappers
- Type:
string[]
配置路由的高阶组件封装。
比如，可以用于路由级别的权限校验：
export default {
routes: [
{ path: '/user', component: 'user',
wrappers: [
'@/wrappers/auth',
],
},
{ path: '/login', component: 'login' },
]
}
然后在 src/wrappers/auth 中，
export default (props) => {
const { isLogin } = useAuth();
if (isLogin) {
return { props.children };
} else {
redirectTo('/login');
}
}
这样，访问 /user，就通过 useAuth 做权限校验，如果通过，渲染 src/pages/user，否则跳转到 /login，由 src/pages/login 进行渲染。
title
- Type:
string
配置路由的标题。
页面跳转
import { history } from 'umi';
// 跳转到指定路由
history.push('/list');
// 带参数跳转到指定路由
history.push('/list?a=b');
history.push({
pathname: '/list',
query: {
a: 'b',
},
});
// 跳转到上一个路由
history.goBack();
hash 路由
详见 配置#history。
Link 组件
比如：
import { Link } from 'umi';
export default () => (
Users Page
);
然后点击 Users Page 就会跳转到 /users 地址。
注意：
Link只用于单页应用的内部跳转，如果是外部地址跳转请使用a标签
路由组件参数
路由组件可通过 props 获取到以下属性，
- match，当前路由和 url match 后的对象，包含
params、path、url和isExact属性 - location，表示应用当前出于哪个位置，包含
pathname、search、query等属性 - history，同 api#history 接口
- route，当前路由配置，包含
path、exact、component、routes等
比如：
export default function(props) {
console.log(props.route);
return <div>Home Page</div>;
}
传递参数给子路由
通过 cloneElement，一次就好（Umi 2 时需要两次）。
import React from 'react';
export default function Layout(props) {
return React.Children.map(props.children, child => {
return React.cloneElement(child, { foo: 'bar' });
});
}
举个实例
如果你想配置在左侧的菜单栏的话，类似于你想达到这种目的：
那么你需要在src/locals/zh-CN/menu.ts中添加“关于”和“更多”（菜单名称），例如：
然后，在config/config.ts文件中配置routes：
就像welcome那样配置就可以了，然后就达到效果了。
config.js中routes属性说明
- name 和 icon分别代表生成菜单项的文本和图标。
- hideChildrenInMenu 用于隐藏不需要在菜单中展示的子路由。用法可以查看 分步表单 的配置。
- hideInMenu 可以在菜单中不展示这个路由，包括子路由。效果可以查看 exception/trigger页面。
- authority 用来配置这个路由的权限，如果配置了将会验证当前用户的权限，并决定是否展示。
Pro 扩展路由配置
-
name: 当前路由在菜单和面包屑中的名称，注意这里是国际化配置的 key，具体展示菜单名可以在/src/locales/zh-CN.js 进行配置。
-
icon: 当前路由在菜单下的图标名。
-
hideInMenu: 当前路由在菜单中不展现，默认 false。
-
hideChildrenInMenu: 当前路由的子级在菜单中不展现，默认 false。
-
hideInBreadcrumb: 当前路由在面包屑中不展现，默认 false。
-
authority: 允许展示的权限，不设则都可见，详见：权限管理。
umi中权限路由怎么实现呢？
配合路由中的配置，再结合对应的权限组件，来实现，直接看例子吧（注意注释部分）：
/*
*config.ts中routes的配置，有一个相对路径，这个相对路径的根路径自动指向了src/pages目录。
*/
routes: [
{//这个是登录的页面
path: '/user',
component: '../layouts/UserLayout',
routes: [
{
name: 'login',
path: '/user/login',
component: './user/login',
},
],
},
{
//需要登录的页面，全都放在 ../layouts/SecurityLayout，嵌套布局
path: '/',
//留意这个组件，在这个组件里进行了登录权限的判断，当然你也可以按照你的需求去进行设置，
//甚至创建新的权限组件
component: '../layouts/SecurityLayout',
routes: [
{
path: '/',
component: '../layouts/BasicLayout',//
authority: ['admin', 'user'],
routes: [
{
path: '/',
redirect: '/welcome',
},
{
//一级菜单
path: '/welcome',
name: 'welcome',
icon: 'smile',
component: './Welcome',
},
{
//一级菜单
path: '/admin',
name: 'admin',
icon: 'crown',
component: './Admin',
authority: ['admin'],//配置权限
routes: [
{
//二级菜单
path: '/admin/sub-page',
name: 'sub-page',
icon: 'smile',
component: './Welcome',
authority: ['admin'],//配置权限
},
],
},
{
name: 'list.table-list',
icon: 'table',
path: '/list',
component: './ListTableList',
},
{
component: './404',
},
],
},
{
component: './404',
},
],
},
{
component: './404',
},
],
总之，非常喜欢umi的权限路由配置，有灵性！真香！
页面跳转
页面跳转在路由的介绍中有介绍，这里在简单介绍下；在 umi 里，页面之间跳转有两种方式：声明式和命令式。
声明式
通过 Link 使用，通常作为 React 组件使用。
import { Link } from 'umi';
export default () => (
Go to list page
);
命令式
通过 history 使用，通常在事件处理中被调用。
import { history } from 'umi';
function goToListPage() {
history.push('/list');
}
也可以直接从组件的属性中取得 history
export default (props) => (
);
下章更精彩
当然了，本人也在不断的踩坑中，无论是typescript，react，umi3…还有很多的坑要踩。文中有什么不妥之处，也欢迎广大网友，批评指正，如有需要提供某一模块更详细的教程的，欢迎留言。