React项目运行报错：模块不存在名为Navbar1的导出问题求助

该报错由默认导出与导入语法不匹配触发：
你的Navbar.js中使用export default Navbar1属于默认导出，但是App.js中import { Navbar1 } from './components/Navbar/Navbar'是命名导入的语法，两者不匹配，所以无法识别到名为Navbar1的导出项。之前项目可以正常运行，大概率是此前的导出/导入语法是匹配的，后续修改代码时误调整了导出或导入语句的格式。

任选以下任意一种方案即可：

方案1：修改App.js导入语句（改动量最小，推荐） #

将Navbar1的导入语句去掉大括号，改为默认导入的写法：

// 修改前
import { Navbar1 } from './components/Navbar/Navbar';
// 修改后
import Navbar1 from './components/Navbar/Navbar';

方案2：修改Navbar.js导出语句 #

将Navbar的默认导出改为命名导出，匹配App.js的导入语法：

// 修改前
export default Navbar1;
// 修改后
export { Navbar1 };

// 也可以直接在类声明时添加export关键字
export class Navbar1 extends Component {
  // 原有组件逻辑保持不变
}

如果你的Footer组件也出现同类报错，按照相同逻辑检查Footer的导出、导入语法是否匹配即可。

• React中默认导出的模块导入时不需要加{}，每个文件仅支持1个默认导出
• React中命名导出的模块导入时需要用{}包裹导出名称，每个文件支持多个命名导出

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