ant design pro的路由配置在 config/config.ts
中
- 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'
},//客户详情
]
},
]
可能出现的问题
[React Intl] Missing message: "menu.登录" for locale: "zh-CN", using default message as fallback.
解决方法:
config.defaultSetting.ts中将 menu:{locale:true} **改成 menu:{ locale: false,}**
查看详情时的配置路由
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}
}