Ant design pro使用(二):配置路由_antd prolayout 怎么配置路由

ant design pro的路由配置在 config/config.ts 中

1. pages中创建组件
   
   2.配置路由

//import {BasicLayout,UserLayout} from '@/layouts'//这种方法会报错不能识别@/layouts模块

rotes:[
    {
      path:'/user',
     component:'../layouts/UserLayout',//如果不使用模板 layout:false
      routes:[
        {path:'/user',redirect:'/user/login'},
        {path:'/user/login',name:'登录', component:'./User/Login'},
        {path:'/user/design',name:'注册',component:'./User/Design'},
        {path:'/user/forget',name:'忘记密码',component:'./User/Forget'},
        {component:'./Empty'}
      ]
    },
     {
      path:'/',
      component:'../layouts/BasicLayout',
      routes:[
        {path:'/',redirect:'/equipment/mall'},
        {
          path:'/equipment',
          name:'设备管理',
          icon:'videoCamera',
          routes:[
            {
                	path:'equipment/mall',
                	name:'设备商城',
                	component:'./Equipment/Mall'
            },
            {
            		path:'/equipment/cpe',
            		name:'CPE设备列表',
            		component: './Equipment/Cpe'
            },
            {
		            path:'/equipment/camera',
		            name:'摄像头列表',
		            component:'./Equipment/Camera'
		      }
          ]
        },
        {path:'/repair',name:'设备报修',icon:'tool',component:'./Repair'},
        { 
                    path:'/customer',
                    name:'客户管理',//客户列表
                    icon:'team',
                    component:'./Customer/CustomerList',
       } ,     
       {
       		path:'/customer/detail/:id',
       		hideInMenu:true,
       		component:'./Customer/CustomerDetail'
       },//客户详情
      ]
    },
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

可能出现的问题

[React Intl] Missing message: "menu.登录" for locale: "zh-CN", using default message as fallback.
解决方法：
	config.defaultSetting.ts中将 menu:{locale:true} **改成 menu:{ locale: false,}**
1
2
3

查看详情时的配置路由
pages
Customer
-CustomerList/index.tsx
-CustomerDetail/index.tsx

config/config.ts
{
	 path:'/customer',
	  name:'客户管理',
	  icon:'team',
	  component:'./Customer/CustomerList'
},
 {
	 path:'/customer/detail/:id',
 	 hideInMenu:true,
	 component:'./Customer/CustomerDetail'
}
组件使用
import {history} from 'umi;
<Button
	 type='dashed' 
	 size='small'
	  shape='round' 
      icon={<SendOutlined />} 
      onClick={()=>{history.push(`/customer/detail/${record.id}`)}}>
       查看详情
	</Button> 
//获取传递的参数
componentDidMount(){
        console.log(this.props.match.params)//{id:12}
}
	
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27