React Router 6+ 要求嵌套路由路径必须相对于父级 Route 的 path，而非绝对路径；需将子路由设为相对路径，并统一用 path="ui/forms/*" 作为唯一父级入口，再在 FormEditor 内部通过 渲染相对路径的动态路由数组。
react router 6+ 要求嵌套路由路径必须相对于父级 `route` 的 `path`，而非绝对路径；需将子路由设为相对路径，并统一用 `path="ui/forms/*"` 作为唯一父级入口，再在 `formeditor` 内部通过 `
在 React Router 6.9.0 中，嵌套路由（descendent routes）的 path 必须是相对路径，其匹配逻辑基于父级 Route 的 path 后缀展开。若父级路径为 "ui/forms/new/*"，而子路由又定义为 "ui/forms/:id/widget/:key"，则实际匹配路径会变成 "ui/forms/new/ui/forms/:id/widget/:key"——显然不符合预期，导致子路由无法匹配和渲染。
✅ 正确做法是：*收敛父级入口，使用单一通配路径 `ui/forms/`，并将所有子路由路径改为相对形式**。
✅ 步骤一：精简并统一父级路由
return (
<browserrouter><routes><route path="ui/forms/*" element="{" i18n="{i18n}"><formeditor></formeditor>
}
/>
</route></routes></browserrouter>
);
✅ 步骤二：更新 routes.js —— 所有 path 改为相对路径
// routes.ts
export const routes = [
{
path: "new", // ← 相对于 "ui/forms/" → 完整路径为 "ui/forms/new"
main: () => import('./FormLayoutEditor'),
permission: 'menu_admin',
},
{
path: ":id", // → "ui/forms/:id"
main: () => import('./FormLayoutEditor'),
permission: 'menu_admin',
},
{
path: ":id/widget/:key", // → "ui/forms/:id/widget/:key"
main: () => import('./FormWrapperEditor'),
permission: 'menu_admin',
}
];
✅ 步骤三：在 FormEditor 中安全渲染动态路由
import { Routes, Route } from 'react-router-dom';
import { routes } from './routes';
// 注意：formData 存在时才渲染，避免空数组或 undefined 导致错误
return (
<headerlesslayout><routes>
{formData && routes.map((r) => (
<route key="{r.path}" r.path index path="{r.path}" lazy="{r.main}" code-splitting></route>
))}
{/* 可选：添加兜底 NotFound 路由 */}
<route path="*" element="{<div">Page not found} />
</route></routes></headerlesslayout>
);
⚠️ 注意事项
- ❌ exact 属性在 v6+ 中已废弃，无需设置；path="new" 默认精确匹配（无尾随 / 时），若需匹配 new/，可写 path="new/*"。
- ❌ replace 属性不适用于嵌套路由，仅用于 useNavigate 或 ；
在 v6.4+ 已移除。 - ✅ lazy 函数必须返回 Promise，确保动态导入组件默认导出有效。
- ✅ 确保 FormEditor 组件位于 Router 作用域内（即被
包裹），否则 useNavigate、useParams 等 Hook 将失效。
通过以上结构调整，FormEditor 内部的
