React Router：无法读取未定义的属性 'pathname'

Question

我刚开始学习 React，但遇到了这个错误。

Uncaught TypeError: Cannot read property 'pathname' of undefined at new Router

这是我的代码：

var React = require('react');
var ReactDOM = require('react-dom');
var { Route, Router, IndexRoute } = require('react-router');
var hashHistory = require('react-router-redux')

var Main = require('./components/Main');

ReactDOM.render(
    <Router history={hashHistory}>
        <Route path="/" component={Main}>

        </Route>
    </Router>,
  document.getElementById('app')
);

我正在学习的教程使用 React-Router 2.0.0，但在我的桌面上我使用的是 4.1.1。我尝试搜索更改，但未能找到有效的解决方案。

"dependencies": {
"express": "^4.15.2",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.1",
"react-router-redux": "^4.0.8"

Answer 1

错误是因为 React Router v4 中的 api 完全不同。你可以试试这个：

import React from 'react';
import ReactDOM from 'react-dom';
import {
  BrowserRouter as Router,
  Route
} from 'react-router-dom';

const Main = () => <h1>Hello world</h1>;

ReactDOM.render(
  <Router>
    <Route path='/' component={Main} />
  </Router>,
  document.getElementById('app')
);

您现在可以查看 documentation 了解其工作原理。

Here 我有一个带有路由动画的 repo。

而且 here 您可以找到现场演示。

Answer 2

我遇到了同样的错误，我通过 将 history 从 2.x.x 更新为 4.x.x

解决了这个问题

npm install history@latest --save

Answer 3

我收到了上面的错误消息，它非常神秘。我尝试了提到的其他解决方案，但没有用。

原来我不小心忘了在 <Link /> 组件之一中包含 to 道具。

希望错误消息更好。一个简单的 required prop "to" not found 或类似的东西会很有帮助。希望这可以节省一些时间遇到同样问题的其他人。

Answer 4

我有一个不同的原因，但同样的错误，因此遇到了这个问题。把它放在这里以防其他人发生同样的情况，这可能会有所帮助。我的问题是我已经更新到 react-router-4 并且访问 pathname 已经改变。

变化： （React-Router-3 及更早版本）

this.props.location.pathname

收件人： (React-Router-4)

this.props.history.location.pathname

Answer 5

只需确保您已将 to 道具添加到 <Link> 否则您也会遇到同样的错误。

添加后应该如下所示：-

<Link to="#">

Answer 6

当我尝试使用 history.props('./somelink') 时出现了类似的错误。我一直收到路径名未定义的错误。事实证明，我也在下面的 JSX 中使用了 <Link></Link>。这就是导致错误的原因。希望这对犯同样错误的人有所帮助

Answer 7

React Router v6 中的 API 与 v5 相比发生了变化。

请参阅以下已接受的答案：

Answer 8

检查应用程序中的所有 Link 或 NavLink 组件，其中一些组件可能缺少 'to' 属性负责将用户重定向到另一个路径

Answer 9

您正在为 Link 元素的“to”属性赋予未定义的值

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

const path = undefined;

function Home() {
  return (
        <Link to={path}>Home</Link> 
  );
}

Answer 10

对于 react-router v6 你应该这样做（使用元素并将所有路由包含在`:

Answer 11

在 react-router-dom 6+ 我收到这个错误

错误：

   <Routes>
      <Route path="/about">
        <About />
      </Route>
      <Route path="/users">
        <Users />
      </Route>
      <Route path="/">
        <Home />
      </Route>
   </Routes>

解法：

<Routes>
   <Route exact path="/" element={<Home />} />
   <Route exact path="/about" element={<About />} />
   <Route exact path="/user" element={<User />} />
</Routes>

Answer 12

如果您将 undefined 或 null 值传递给 <Link /> 的道具 to，此错误仍然会发生。

Answer 13

只需使用 BrowserRouter 作为 Router，而不是 Router

React Router：无法读取未定义的属性 'pathname'

React Router: Cannot read property 'pathname' of undefined

jsx

reactjs

react-jsx

react-router

react-router-redux

React Router：无法读取未定义的 属性 'pathname'

React Router: Cannot read property 'pathname' of undefined

jsx

reactjs

react-jsx

react-router

react-router-redux

React Router：无法读取未定义的属性 'pathname'