React报错：标识符‘Navbar’已被声明，求解决方案

错误原因 #

错误提示Identifier 'Navbar' has already been declared表示代码中重复声明了Navbar标识符。从你提供的代码来看，当前写法不存在直接的重复声明，但大概率是缓存残留或历史代码修改未同步导致的：

• 之前你可能将组件函数命名为Navbar（和react-bootstrap导入的Navbar重名），修改为Navigationbar后，编辑器或构建工具的缓存未更新。
• 项目构建工具（如Webpack）的缓存保留了旧代码的编译结果，导致冲突提示未消失。

解决方案 #

1. 清理缓存并重启开发服务器 #

这是最常见的解决方式：

• 关闭当前运行的React开发服务器。
• 删除项目根目录下的缓存文件夹：
  • 若使用Create React App，删除node_modules/.cache目录；
  • 若使用Vite，删除node_modules/.vite目录。
• 重新启动开发服务器（npm start或yarn start），让代码重新编译。

2. 检查代码细节 #

确认Navigationbar.js的以下细节：

• 确保没有残留的let Navbar = () => {}这类重复声明代码。
• 组件函数名和导出语句完全一致：

  let Navigationbar = () => { /* ... */ }
  export default Navigationbar;
  

• 文件名确实是Navigationbar.js，而非Navbar.js（避免文件命名与导入的组件名混淆）。

3. 临时排查ESLint误报 #

如果是ESLint的错误提示，可以在Navigationbar.js顶部添加注释禁用相关规则，验证是否为误报：

/* eslint-disable no-redeclare */
import React from 'react';
import {Navbar, Container, Nav} from 'react-bootstrap';
// ... 其余代码

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