React Router：彻底解决“Cannot read property 'pathname' of undefined”错误

2024-03-25 08:58:56

React Router：解决“Cannot read property 'pathname' of undefined”错误的综合指南

前言

在使用 React Router 时，开发人员可能会遇到一个常见的错误：“Cannot read property 'pathname' of undefined”。此错误通常源于未在 Router 组件中指定“history”属性。本文将深入探讨导致此错误的原因，并提供逐步解决方法，帮助您恢复正常应用程序功能。

了解“history”属性

React Router 中的“history”属性是一个对象，它允许路由组件访问有关当前 URL 和浏览历史记录的信息。通过访问此属性，路由组件可以动态更新应用程序的 UI 并响应用户导航。

原因：缺少“history”属性

如果未在 Router 组件中指定“history”属性，则该组件将无法访问有关当前 URL 的信息，从而导致“Cannot read property 'pathname' of undefined”错误。

解决方案：创建并传递“history”对象

要解决此错误，您需要创建并向 Router 组件传递一个“history”对象。可以通过使用 react-router-dom 库中的 createBrowserHistory 函数来实现此目的：

import { createBrowserHistory } from "react-router-dom";

const browserHistory = createBrowserHistory();

// 在此将 browserHistory 传递给 Router 组件

代码示例：

import { createBrowserHistory } from "react-router-dom";
import { Router, Route, Switch } from "react-router-dom";

const browserHistory = createBrowserHistory();

const App = () => {
  return (
    <div>
      <h1>React Router Demo</h1>

      <Router history={browserHistory}>
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </Router>
    </div>
  );
};

export default App;