React项目报错Cannot read properties of undefined (reading 'pathname')的解决方法

你遇到的这个错误通常是路由组件未正确关联react-router-dom上下文导致的，结合你的代码，给出以下解决方案：

检查NavLinks的定义 #

你的NavLinks必须是基于react-router-dom的Link组件通过styled-components包装而来，而非自定义的普通元素。如果定义错误，组件无法获取路由上下文的location对象，就会触发读取pathname的错误。

正确的定义方式（在Navbar.js中）：

import { Link } from 'react-router-dom';
import styled from 'styled-components';

// 用styled包装react-router-dom的Link组件
const NavLinks = styled(Link)`
  // 这里添加你的样式代码，示例：
  color: #fff;
  text-decoration: none;
  padding: 0 16px;
  // 其他自定义样式...
`;

确认组件处于Router上下文内 #

你的App.js中Navbar已经放在Router组件内部，这部分是正确的。要确保所有使用NavLinks的组件都被包裹在Router（或BrowserRouter）之内，否则无法访问路由上下文。

验证menuData的link字段 #

检查你的menuData数组中每个item的link属性是否为有效的字符串路径（比如'/'、'/projects'），避免出现undefined或空值，这也可能引发路由组件报错。

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