Antd Pro 路由转发redirect

骑猪看日落 2023-10-05 21:49 38阅读 0赞

#### Antd Pro 路由转发redirect ####

*  1.问题
 *  2. 我的配置（错误的）
 *  3.修改后的配置
 *  4.总结

## 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`)由须在同一层**。