React Router 遍历配置生成路由时组件无法加载问题

你在路由配置对象中直接书写component:<AdmNews/>的JSX写法是错误的，这就是组件无法正常加载的核心原因。

React.lazy 包装的懒加载组件，必须放在 <React.Suspense> 边界的子树范围内创建、渲染，Suspense 才能正常捕获组件的异步加载状态，完成加载中、加载完成的状态切换。
你当前的写法在定义AdminRoutes数组时，就提前执行了<AdmNews/>的JSX逻辑（转译为React.createElement(AdmNews)），存储的是固定的React元素对象引用：

• 元素创建上下文脱离Suspense边界，懒加载抛出的异步状态无法被稳定捕获
• Suspense加载完成后会对比子元素引用，发现传入的还是旧的元素对象，不会触发懒加载组件的重渲染
  最终就会出现路径匹配成功、路由响应正常，但组件无报错也不渲染的现象。
  你手动编写Route时能正常运行，正是因为手动写的<AdmNews/>直接放在Suspense包裹的element属性内部，属于Suspense边界的子节点，每次渲染都会在边界内创建新的元素引用，加载状态可以被正常识别。

不要在路由配置中提前创建好JSX元素，改为存储懒加载组件的引用，在遍历渲染Route、处于Suspense边界内部时再创建组件元素即可。
修正后的路由配置代码：

const AdmNews = React.lazy(() => import('./components/adm/AdmNews'));
const AdmPeople = React.lazy(() => import('./components/adm/AdmPeople'));
    
const AdminRoutes = [
  // 直接存储组件引用，不要加<>写成JSX元素
  {path:"/route/admin/news", component: AdmNews},
  {path:"/route/admin/people", component: AdmPeople},
]

修正后的路由遍历渲染代码：

{AdminRoutes.map((el)=>{
  // 取出组件引用，在Suspense内部实例化元素
  const RouteComponent = el.component;
  return <Route path={el.path} 
    element={
      <React.Suspense fallback={<>...</>}> 
        <RouteComponent />
      </React.Suspense>
  }/> 
})}

这种写法也是React路由配置的通用标准写法，后续如果需要给路由组件传自定义props，也可以直接在<RouteComponent />上添加属性，灵活性更高。

内容的提问来源于stack exchange，提问作者Germán