概要

路由配置是单页应用的核心之一, 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

7

8

这是菜单1-1-1

9

10

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

8

9

这是用来新增内容的页面

10

11 onClick={() => {

12 history.goBack();

13 }}

14 >

15 返回

16

17

18

19 );

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

history.goBack() 用来返回上一次的路由

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

1 export default () => (

2

3

4

这是菜单1-1-2

5

6 type="primary"

7 onClick={() => {

8 history.push('/menu1/menu11/menu112/create');

9 }}

10 >

11 新增

12

13

14

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

8

9

这是菜单1-1-2

10

11 type="primary"

12 onClick={() => {

13 history.push('/menu1/menu11/menu112/create');

14 }}

15 >

16 新增

17

18

19

20 type="primary"

21 onClick={() => {

22 history.push('/menu1/menu11/menu112/edit/111');

23 }}

24 >

25 编辑

26

27

28

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

10

11

这是用来编辑内容的页面

12

参数 ID: {params.id}

13

14 onClick={() => {

15 history.goBack();

16 }}

17 >

18 返回

19

20

21

22 );

23 };

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

总结

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

Menu112.jsx

Create.jsx

Edit.jsx

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