React实现导航栏遇Switch未导出、react-icons/fa缺失报错

两个编译报错分别由React Router版本API迭代、项目缺失依赖导致，按以下步骤修复即可：

报错1：export 'Switch' (imported as 'Switch') was not found in 'react-router-dom' #

原因 #

当前项目安装的是 react-router-dom v6 及以上版本，Switch 是 v5 及更早版本的API，v6版本已使用 Routes 完全替代该组件，同时调整了路由配置规则

修复步骤 #

• 修改./src/App.js的导入语句，删除Switch的导入，新增Routes导入：
  把旧代码

  import { Switch, Route } from 'react-router-dom'
  

  替换为

  import { Routes, Route } from 'react-router-dom'
  

• 把JSX代码中所有包裹<Route>的<Switch>标签，全部替换为<Routes>标签
• 调整<Route>的属性写法适配v6规则：v6不再支持component/render属性传组件，统一使用element属性传入JSX节点，示例对比：

  // 旧v5写法（会报错）
  <Switch>
    <Route path="/" component={Home} />
    <Route path="/about" component={About} />
  </Switch>
  
  // 新v6正确写法
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
  </Routes>
  

• 如果原代码中使用useHistory做路由跳转，同步替换为v6的useNavigate，调用示例：

  import { useNavigate } from 'react-router-dom';
  const navigate = useNavigate();
  // 跳转逻辑
  navigate('/target-path');
  

报错2：Module not found: Error: Can't resolve 'react-icons/fa' #

原因 #

示例代码用到了react-icons包提供的Font Awesome图标组件，但本地项目未安装该依赖，导致编译时无法找到对应模块

修复步骤 #

• 打开项目根目录的终端，根据使用的包管理器执行安装命令：
  npm用户执行：

  npm install react-icons
  

  yarn用户执行：

  yarn add react-icons
  

• 安装完成后重启本地开发服务，等待重新编译即可。
• 如果不想额外安装图标依赖，也可以直接删除./src/components/Navbar/NavbarElements.js中从react-icons/fa导入的内容，把对应用到图标的位置替换为文字、自定义样式或者本地图片资源。

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