Antd Pro 路由转发redirect
1.问题
使用AntdPro
React框架,自己配置的路由转发不跳转,而且导致原来正常的路由也不能访问,打开浏览器也没有报错。
2. 我的配置(错误的)
AntD pro
的路由配置在 config/routes.ts
中,根据文档,我们可以使用 redirect
属性来配置路由转发,如下,我想当访问 /order
时转发到 /order/list
,配置如下:
export default [
{
path: '/welcome',
name: 'welcome',
icon: 'smile',
component: './Welcome',
},
{
path: '/order',
name: 'order',
icon: 'smile',
// 转发 到 /order/list
redirect: '/order/list',
routes: [
{
name: 'list',
path: '/order/list',
component: './Order',
},
{
name: 'add',
path: '/order/add',
component: './Order/Add',
hideInMenu: true,
},
{
name: 'modify',
path: '/order/modify',
component: './Order/Modify',
hideInMenu: true,
},
{
name: 'addResult',
path: '/order/addResult',
hideInMenu: true,
component: './Order/AddResult',
},
{
name: 'detail',
path: '/order/detail/:id',
hideInMenu: true,
component: './Order/Detail',
},
{
name: 'print',
path: '/order/print/:id',
hideInMenu: true,
component: './Order/Print',
},
],
},
{
path: '/',
redirect: '/welcome',
},
{
component: './404',
},
];
3.修改后的配置
如 2 配置后,并没有完成转发功能,反而使得原来能访问的 /order/list
,不能访问,并且打开浏览器后没有发现任何问题。
细细观察 antd pro
自带的转发后发现,要转发的路由和目标路由都属于同一层,于是修改代码如下:
export default [
{
path: '/welcome',
name: 'welcome',
icon: 'smile',
component: './Welcome',
},
{
path: '/order',
name: 'order',
icon: 'smile',
routes: [
// 配置转发,由 /order 转发到 /order/list
{
path: '/order',
redirect: '/order/list',
},
{
name: 'list',
path: '/order/list',
component: './Order',
},
{
name: 'add',
path: '/order/add',
component: './Order/Add',
hideInMenu: true,
},
{
name: 'modify',
path: '/order/modify',
component: './Order/Modify',
hideInMenu: true,
},
{
name: 'addResult',
path: '/order/addResult',
hideInMenu: true,
component: './Order/AddResult',
},
{
name: 'detail',
path: '/order/detail/:id',
hideInMenu: true,
component: './Order/Detail',
},
{
name: 'print',
path: '/order/print/:id',
hideInMenu: true,
component: './Order/Print',
},
],
},
{
path: '/',
redirect: '/welcome',
},
{
component: './404',
},
];
4.总结
经 3 修改后,路由能正常跳转。一句话总结:antd pro
路由转发配置时,原路由(/order
)和目标路(/order/list
)由须在同一层。