React Router 6+ 要求嵌套路由路径必须相对于父级 Route 的 path，而非绝对路径；需将子路由设为相对路径，并统一用 path="ui/forms/*" 作为唯一父级入口，再在 FormEditor 内部通过 <Routes> 渲染相对路径的动态路由数组。
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={
<I18nProvider i18n={i18n}>
<FormEditor />
</I18nProvider>
}
/>
</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} // 推荐用语义化 key（如 r.path），避免 index 键在重排时引发问题
path={r.path} // ✅ 相对路径
lazy={r.main} // ✅ 支持 code-splitting 的 lazy 加载
/>
))}
{/* 可选：添加兜底 NotFound 路由 */}
<Route path="*" element={<div>Page not found</div>} />
</Routes>
</HeaderLessLayout>
);⚠️ 注意事项
- ❌ exact 属性在 v6+ 中已废弃，无需设置；path="new" 默认精确匹配（无尾随 / 时），若需匹配 new/，可写 path="new/*"。
- ❌ replace 属性不适用于嵌套路由，仅用于 useNavigate 或 <Link replace>；<Route replace> 在 v6.4+ 已移除。
- ✅ lazy 函数必须返回 Promise<{ default: React.ComponentType }>，确保动态导入组件默认导出有效。
- ✅ 确保 FormEditor 组件位于 Router 作用域内（即被 <BrowserRouter> 包裹），否则 useNavigate、useParams 等 Hook 将失效。
通过以上结构调整，FormEditor 内部的 <Routes> 就能正确解析并渲染所有相对路径子路由，实现灵活、可扩展的动态表单编辑器路由体系。
