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/listredirect: '/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)由须在同一层。

Antd Pro 路由转发redirect相关推荐

antd pro路由
antd design pro vue 的路由有两种方式一种是前端定义好路由routes,由后端返回roles进行过滤 : 另一种是后端返回 routes 列表生成menu. 一.先看第一种方式 ...
antd pro mysql_antd pro 路由
概要路由配置是单页应用的核心之一, antd pro 将所有的路由配置集中在一个文件中, 可以更好的对应用的全局进行管理. 同时, 它的路由还和菜单和面包屑自动关联上了, 真的是给开发节省了大量的时 ...
Ant Design Pro路由参数改变页面没有重新渲染问题的解决
文章目录发现问题解决问题发现问题同一个组件根据Ant Pro路由传递进来的user和menu两个参数实现不同页面的渲染效果,测试发现页面在第一次渲染时没有问题,改变参数重新渲染则不刷新,如下所 ...
Antd Pro食用笔记（一）——基本使用
Antd Pro官方文档地址: Antd Pro 文档此篇涉及到的配套技术文档: ProLayout UmiJS 一.初始化一个antd pro项目(官网步骤) 1.1 安装官网的安装步骤: 新建 ...
antd pro学习记录
antd pro是一个后台模板,但上手之后还是有种劝退的感觉,要读懂代码还是得花点功夫. 把区块装好会自动生成路由对象,启动项目后为什么会重定向到/user/login? routes: [{path ...
苹果电脑macbook/mac_os开启路由转发功能
mac OS开启路由转发功能主要是我有时候需要用mac进行ps4直播转发,需要mac开启路由功能环境:MAC OS 10.11 机器:macbook pro 配置方法基本步骤跟linux类似,不 ...
Linux系统端口映射（路由转发）
2019独角兽企业重金招聘Python工程师标准>>> Linux系统端口映射(路由转发),首先应该做的是/etc/sysctl.conf配置文件的 net.ipv4.ip_forw ...
antd pro v5 tab标签卡（多标签页）实现
多标签页很多公司的后台管理系统都会有这个需求,之前用vue一般架子也是带的,现在公司用了antd pro ,看了下官方不支持,确实会影响性能,但是架不住需求. 补充: antdpro 已经内置了多页签 ...
antd pro学习入门笔记+todolist实例
AntD Pro零散笔记 antd pro 4.0是一个集成了前后端服务.mock模拟接口.dva容器.typescript.less的一个解决方案,有助于快速的二次开发(不过感觉脚手架真的很大) 文 ...

Antd Pro 路由转发redirect