React懒加载失效报错：Uncaught TypeError: can't convert item to string

问题分析 #

你遇到的can't convert item to string错误，大概率出现在自定义的Route或Router组件内部，而非App.jsx的代码逻辑。React.lazy返回的是特殊的延迟加载组件类型，若自定义路由组件中存在将Component prop强制转换为字符串的操作（比如模板字符串拼接、错误的日志输出），就会触发这个类型错误。

你的App.jsx代码本身没有问题：lazy函数的用法符合规范，Suspense也正确包裹了路由组件。

排查与修复步骤 #

1. 检查自定义Route组件的实现 #

找到Route.jsx，排查是否有以下错误写法：

• 尝试将Component参数转为字符串输出，比如：

  // 错误示例
  function Route({ path, Component }) {
    console.log(`当前路由组件：${Component}`); // 这里会触发类型错误
    return <Component />;
  }
  

• 在渲染逻辑中错误处理了组件类型，比如用字符串方式判断组件。

2. 修正Route组件的渲染逻辑 #

确保直接将Component作为React组件渲染，避免任何类型转换操作：

// 正确示例
function Route({ path, Component }) {
  // 直接渲染组件，不做字符串转换
  return <Component />;
}

3. 检查Router组件的路径解析逻辑 #

如果Router.jsx中包含路径参数（比如/search/:query）的解析代码，确认是否在处理参数值时，错误地将对象类型转为字符串（比如解析后的参数对象直接拼接进字符串）。

额外建议 #

Suspense的fallback={null}会导致加载过程中页面无反馈，建议替换为加载提示，提升用户体验：

<Suspense fallback={<div>页面加载中...</div>}>
  {/* 路由组件 */}
</Suspense>

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