antd pro 路由

概要
antd pro 路由简介
总结

概要

路由配置是单页应用的核心之一, antd pro 将所有的路由配置集中在一个文件中, 可以更好的对应用的全局进行管理.
同时, 它的路由还和菜单和面包屑自动关联上了, 真的是给开发节省了大量的时间.

antd pro 路由简介

首先创建一个 antd pro 的项目, 创建方法很简单, 参见 antd pro 的文档

antd pro 的路由配置文件在项目根目录下的 config 文件夹中: /config/config.js
这里简单介绍路由相关的配置, 所以对默认生成的模板做一些改动, 去除登录和权限的部分. 并定义一些示例的菜单.

 1  routes: [
 2    {
 3      path: '/',
 4      component: '../layouts/BasicLayout',
 5      routes: [
 6        {
 7          path: '/',
 8          redirect: '/menu1/menu11/menu111',
 9        },
10        {
11          path: '/menu1',
12          name: 'menu1',
13          routes: [
14            {
15              path: '/menu1/menu11',
16              name: 'menu11',
17              routes: [
18                {
19                  path: '/menu1/menu11/menu111',
20                  name: 'menu111',
21                  component: './routeSample/Menu111',
22                },
23                {
24                  path: '/menu1/menu11/menu112',
25                  name: 'menu112',
26                  component: './routeSample/Menu112',
27                },
28              ],
29            },
30            {
31              path: '/menu1/menu12',
32              name: 'menu12',
33              component: './routeSample/Menu12',
34            },
35          ],
36        },
37        {
38          path: '/menu2',
39          name: 'menu2',
40          routes: [
41            {
42              path: '/menu2/menu21',
43              name: 'menu21',
44              component: './routeSample/Menu21',
45            },
46          ],
47        },
48      ],
49    },
50    {
51      component: './404',
52    },
53  ],

如上配置后, 显示的效果如下:
菜单和面包屑

每个菜单对应的页面很简单, 只是显示一行文字:

1  # 页面路径
2  $ ls  ./src/pages/routeSample
3  Menu111.jsx  Menu112.jsx  Menu12.jsx  Menu21.jsx

页面的代码如下: (以 Menu111.jsx 为例)

 1  import React from 'react';
 2  import { PageHeaderWrapper } from '@ant-design/pro-layout';
 3  import { Card } from 'antd';
 4  
 5  export default () => (
 6    <PageHeaderWrapper>
 7      <Card>
 8        <h1>这是菜单1-1-1</h1>
 9      </Card>
10    </PageHeaderWrapper>
11  );

路由, 菜单和面包屑

在 config.js 中配置路由之后, 会自动生成菜单和面包屑, 菜单和面包屑的名称就是 name 属性定义的

1  {
2    path: '/menu2/menu21',
3    name: 'menu21',   // 这个就是定义菜单和面包屑显示的名称
4    component: './routeSample/Menu21',
5  },

这里的名称是 menu21, 但是页面上显示的是 菜单 2-1,
这是因为 antd pro 中默认启用了国际化功能. 菜单的名称在 ./src/locales/zh-CN/menu.js 中配置

 1  export default {
 2    'menu.welcome': '欢迎',
 3    'menu.home': '首页',
 4    'menu.menu1': '菜单1',
 5    'menu.menu1.menu11': '菜单1-1',
 6    'menu.menu1.menu11.menu111': '菜单1-1-1',
 7    'menu.menu1.menu11.menu112': '菜单1-1-2',
 8    'menu.menu1.menu12': '菜单1-2',
 9    'menu.menu2': '菜单2',
10    'menu.menu2.menu21': '菜单2-1',
11  };

页面之间的路由

创建个新的页面 Create.jsx, 添加测试的按钮, 在 menu112 中互相跳转

首先, 在 config.js 中配置路由信息

 1  {
 2    path: '/menu1/menu11/menu112',
 3    name: 'menu112',
 4    component: './routeSample/Menu112',
 5  },
 6  // 下面是新增的部分 
 7  {
 8    path: '/menu1/menu11/menu112/create',
 9    name: 'create',
10    hideInMenu: true,  // 这里设置为true, 就不会显示在菜单中
11    component: './routeSample/Create',
12  },

Create.jsx 内容如下:

 1  import React from 'react';
 2  import { history } from 'umi';
 3  import { PageHeaderWrapper } from '@ant-design/pro-layout';
 4  import { Card, Button } from 'antd';
 5  
 6  export default () => (
 7    <PageHeaderWrapper>
 8      <Card>
 9        <h1>这是用来新增内容的页面</h1>
10        <Button
11          onClick={() => {
12            history.goBack();
13          }}
14        >
15          返回
16        </Button>
17      </Card>
18    </PageHeaderWrapper>
19  );

umi3 中, 没有 umi/router 这个 package 了, 需要使用 history 来进行路由跳转, antd pro 中的相关文档可能还没有更新
history.goBack() 用来返回上一次的路由

Menu112.jsx 中放个测试按钮来跳转到这个新增页面

 1  export default () => (
 2    <PageHeaderWrapper>
 3      <Card>
 4        <h1>这是菜单1-1-2</h1>
 5        <Button
 6          type="primary"
 7          onClick={() => {
 8            history.push('/menu1/menu11/menu112/create');
 9          }}
10        >
11          新增
12        </Button>
13      </Card>
14    </PageHeaderWrapper>
15  );

这样, Create.jsx 和 Menu112.jsx 之间就可以来回跳转了

带参数的路由

再加个页面 Edit.jsx, 演示路由中参数的传递.

同样, 现在路由配置中加上 Edit.jsx 的路由

 1  {
 2    path: '/menu1/menu11/menu112/create',
 3    name: 'create',
 4    hideInMenu: true,
 5    component: './routeSample/Create',
 6  },
 7  {
 8    path: '/menu1/menu11/menu112/edit/:id',   // 这里 :id 就是路由中的参数
 9    name: 'edit',
10    hideInMenu: true,
11    component: './routeSample/Edit',
12  },

menu.js 中别忘了加上 name edit 对应的配置.

然后, 在 Menu112.jsx 中再增加一个编辑按钮

 1  import React from 'react';
 2  import { history } from 'umi';
 3  import { PageHeaderWrapper } from '@ant-design/pro-layout';
 4  import { Card, Button } from 'antd';
 5  
 6  export default () => (
 7    <PageHeaderWrapper>
 8      <Card>
 9        <h1>这是菜单1-1-2</h1>
10        <Button
11          type="primary"
12          onClick={() => {
13            history.push('/menu1/menu11/menu112/create');
14          }}
15        >
16          新增
17        </Button>
18        &nbsp;&nbsp;&nbsp;
19        <Button
20          type="primary"
21          onClick={() => {
22            history.push('/menu1/menu11/menu112/edit/111');
23          }}
24        >
25          编辑
26        </Button>
27      </Card>
28    </PageHeaderWrapper>
29  );

这里传入参数 id 的值是 111

最后是 Edit.jsx 页面的代码:

 1  import React from 'react';
 2  import { history, useParams } from 'umi';
 3  import { PageHeaderWrapper } from '@ant-design/pro-layout';
 4  import { Card, Button } from 'antd';
 5  
 6  export default () => {
 7    const params = useParams();
 8    return (
 9      <PageHeaderWrapper>
10        <Card>
11          <h1>这是用来编辑内容的页面</h1>
12          <p>参数 ID: {params.id}</p>
13          <Button
14            onClick={() => {
15              history.goBack();
16            }}
17          >
18            返回
19          </Button>
20        </Card>
21      </PageHeaderWrapper>
22    );
23  };

获取参数就是使用 useParams 这个 API