react-router-dom v6 useRoutes报错:/app下嵌套绝对路径/无效如何解决
报错根因
该报错与升级react-dom无直接关联,核心触发原因是react-router-dom v6的嵌套路由校验规则:
- React Router v6明确要求嵌套子路由不可使用
/开头的绝对路径,否则会脱离父路由的路径层级约束。你的路由配置中,父路径app的子路由数组内存在{ path: '/', element: <DashboardView /> }的配置,/为根绝对路径,嵌套在/app路径下不符合规则,因此抛出异常。 - 此前未触发报错是因为
6.0.0-beta.4属于早期beta版本,尚未上线该规则的校验逻辑。由于package.json中react-router-dom依赖使用了^版本范围符,本次升级react-dom重新安装依赖时,实际拉取到了新增该校验规则的更高beta版本,因此触发报错。
修复方案
仅需调整路由配置中/app对应的默认子路由配置即可:
将/app子路由数组中的
{ path: '/', element: <DashboardView /> }
修改为
{ path: '', element: <DashboardView /> }
空字符串的子路径代表父路由的默认子路由,访问/app时会直接渲染DashboardView,完全匹配原有业务逻辑,修改后重启项目即可消除报错。
内容的提问来源于stack exchange,提问作者Kid
相关产品推荐
相关产品推荐

