React页面跳转时报TypeError: Cannot read properties of undefined (reading 'pathname')如何解决

这个报错本质是代码尝试读取undefined值的pathname属性，90%以上的场景和React Router的路由上下文、跳转逻辑相关，具体可分为以下几类：

• 路由上下文缺失：使用路由相关API的组件没有被BrowserRouter/HashRouter包裹，无法从路由上下文拿到location对象，直接读取location.pathname就会报错。如果是React Router v6的类组件，没有用withRouter高阶组件包裹，也会拿不到props里的location对象。
• 跳转传参非法：调用navigate（v6）或者history.push（v5及更早版本）执行跳转时，传入了undefined作为跳转路径，或者自定义跳转工具函数内部没有做参数校验，读取路径参数的pathname字段时报错。
• 路由配置字段错误：手动配置路由表时，部分路由项遗漏了path字段，或者字段名混用了path和pathname，遍历路由表生成路由组件时读取对应字段为undefined。
• 异步逻辑/旧状态残留：组件卸载前的异步逻辑触发了状态更新，此时保存在state里的location对象已经被销毁，读取pathname就会触发报错。

对应不同场景可选择对应的修复方式：

• 补全路由上下文：确保应用根组件外层被BrowserRouter包裹，示例写法：

  // 入口文件main.jsx/index.jsx
  import { BrowserRouter } from 'react-router-dom'
  ReactDOM.createRoot(document.getElementById('root')).render(
    <BrowserRouter>
      <App />
    </BrowserRouter>
  )
  

  函数组件统一用useLocation钩子获取location对象，不要直接从props读取：

  import { useLocation } from 'react-router-dom'
  function MyComponent() {
    const location = useLocation()
    // 加可选链兼容异常场景
    const currentPath = location?.pathname
  }
  

  类组件需要用withRouter高阶组件包裹后再导出：

  import { withRouter } from 'react-router-dom'
  class MyComponent extends React.Component {
    render() {
      const currentPath = this.props.location?.pathname
    }
  }
  export default withRouter(MyComponent)
  

• 校验跳转参数：所有跳转逻辑执行前先校验路径合法性，避免传入空值：

  const navigate = useNavigate()
  // 跳转前校验
  if (targetPath) {
    navigate(targetPath)
  }
  // 封装工具函数加默认值
  const jump = (path = '/') => navigate(path)
  

• 核对路由配置：统一路由表字段名，遍历的时候加可选链兜底：

  const routeList = [
    { path: '/home', element: <Home /> },
    { path: '/about', element: <About /> }
  ]
  // 遍历加可选链
  routeList.map(item => <Route path={item?.path} element={item.element} />)
  

• 全局加可选链兜底：所有读取pathname的位置都加可选链操作符?.，就算目标值为undefined也不会抛出阻断性报错：

  // 错误写法
  const path = location.pathname
  // 正确写法
  const path = location?.pathname
  

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