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

总结

最后, 是几个相关页面的截图:

• menu112.jsx
• create.jsx
• edit.jsx

补充一点, 路由中参数尽量简单, 如果页面之间传输的数据比较多, 那么最好通过 antd pro 的 model 来共享. 尽量不要在 url 中放置太多的东西.