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 <div style={{ padding: 20 }}>{ props.children }</div>;
}

这样，访问 /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 <div>{ props.children }</div>;
  } 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 () => (
  <div>
    <Link to="/users">Users Page</Link>
  </div>
);

然后点击 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 () => (
  <Link to="/list">Go to list page</Link>
);

命令式

通过 history 使用，通常在事件处理中被调用。

import { history } from 'umi';

function goToListPage() {
  history.push('/list');
}

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

export default (props) => (
  <Button onClick={()=>props.history.push('/list');}>Go to list page</Button>
);

下章更精彩
当然了，本人也在不断的踩坑中，无论是typescript，react，umi3…还有很多的坑要踩。文中有什么不妥之处，也欢迎广大网友，批评指正，如有需要提供某一模块更详细的教程的，欢迎留言。