React报错：期望组件类型却得到undefined，该如何修复？

这个报错的核心是你尝试渲染的组件值为undefined，绝大多数情况是组件导入与导出的方式不匹配导致的，结合你的项目代码，修复步骤如下：

错误原因分析 #

当你在App.js中导入自定义组件时，如果组件文件的导出方式和你的导入方式不对应，就会导致导入的组件为undefined，比如：

• 组件用export default（默认导出），但你用import { 组件名 } from '路径'（命名导入）
• 组件用export const 组件名（命名导出），但你用import 组件名 from '路径'（默认导入）

具体修复方法 #

选择以下任意一种统一的导入导出方式即可：

方式一：使用默认导出+默认导入 #

1. 在组件文件（比如Header.js）中修改导出：

const Header = () => {
  // 你的组件逻辑
  return <header>...</header>;
};

export default Header;

2. 在App.js中对应修改导入：

import Header from './Header';

方式二：使用命名导出+命名导入 #

1. 在组件文件中修改导出：

export const Header = () => {
  // 你的组件逻辑
  return <header>...</header>;
};

2. 在App.js中对应修改导入：

import { Header } from './Header';

额外检查点 #

• 确保所有自定义组件都按照上述规则统一导入导出
• 检查App.js自身的导出：如果index.js中是默认导入App，那么App.js必须有export default App的语句

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