React Router 6.9.0路由数组渲染问题：子路由无法显示求助

问题出在React Router 6和5的路由机制差异上，以下是针对性的修改步骤：

1. 修正路由配置文件（routes.js） #

React Router 6中嵌套路由需要使用相对路径，同时移除不再支持的exact属性：

export const routes = [
  {
    path: "", // 对应父路由的 ui/forms/new 或 ui/forms/:id 路径
    main: () => import('./FormLayoutEditor'),
    permission: 'menu_admin'
  },
  {
    path: "widget/:key", // 对应父路由下的子路径，即 ui/forms/:id/widget/:key
    main: () => import('./FormWrapperEditor'),
    permission: 'menu_admin'
  }
];

2. 调整FormEditor的子路由渲染逻辑 #

React Router 6不再支持Route组件的lazy属性，需改用React内置的lazy函数配合Suspense实现懒加载，同时用element属性指定渲染组件：

import { Routes, Route } from 'react-router-dom';
import { Suspense, lazy } from 'react';
import { routes } from './routes';

// 可选：定义加载时的占位组件
const Loading = () => <div>加载中...</div>;

return (
  <HeaderLessLayout>
    <Suspense fallback={<Loading />}>
      <Routes>
        {formData && routes.map((r, key) => {
          const Component = lazy(r.main);
          return (
            <Route 
              key={key} 
              path={r.path} 
              element={<Component />} 
            />
          );
        })}
      </Routes>
    </Suspense>
  </HeaderLessLayout>
);

3. 优化父路由配置 #

React Router 6的Route组件没有replace属性，直接移除即可：

return (
  <BrowserRouter>
    <Routes>
      <Route
        path="ui/forms/new/*"
        element={
          <I18nProvider i18n={i18n}>
            <FormEditor />
          </I18nProvider>
        }
      />
      <Route
        path="ui/forms/:id/*"
        element={
          <I18nProvider i18n={i18n}>
            <FormEditor />
          </I18nProvider>
        }
      />
    </Routes>
  </BrowserRouter>
);

核心差异说明 #

• 相对路径：子路由路径需基于父路由路径编写，父路由末尾的/*用于匹配所有子路由
• 懒加载：Route组件不再支持lazy属性，必须通过React.lazy + Suspense实现
• 精确匹配：React Router 6默认开启精确匹配，嵌套路由依赖父路由的/*通配符实现层级匹配，无需设置exact

内容的提问来源于stack exchange，提问作者Juan Attorri