在React中添加react-router-dom的Link组件时出现错误

问题说明 #

开发简易React应用时，使用react-router-dom的Link组件触发错误，相关组件及错误位置如下：

组件代码结构 #

• App.js（路由所在组件）
  

• MenuNavigation组件（嵌入在Header组件内）
  

错误位置 #

排查与解决建议 #

• 先确认react-router-dom是否安装：
  运行npm list react-router-dom检查，未安装则执行npm install react-router-dom（根据包管理器替换为yarn/pnpm命令）
• 确保Link在路由容器范围内：
  Link必须被BrowserRouter/HashRouter等路由提供者包裹，检查App.js或入口文件（如index.js）是否用BrowserRouter包裹了整个应用组件树
• 验证Link的导入语句：
  正确导入：import { Link } from 'react-router-dom';，检查MenuNavigation组件中是否写错
• 检查to属性格式：
  to需为字符串路径（如to="/home"）或路由对象（如to={{ pathname: '/home' }}），避免语法错误

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