反应路由器：无法读取未定义的属性“路径名”

Posted 2023-02-21

【中文标题】反应路由器：无法读取未定义的属性“路径名”

【英文标题】：React Router: Cannot read property 'pathname' of undefined

【发布时间】：2017-09-23 00:51:22

【问题描述】：

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

未捕获的类型错误：无法读取未定义的属性“路径名” 在新路由器上

这是我的代码：

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"

【问题讨论】：

你想使用 BrowserRouter 组件而不是路由器。

【参考方案1】：

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

原来我不小心忘记在 <Link /> 组件之一中包含 to 属性。

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

【讨论】：

该死，这就是问题所在。我在一个对象数组中循环，键名为route，但是在循环时我正在寻找一个名为to 的键，它是未定义的：facepalm：

【参考方案2】：

这个错误是因为 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我有一个带有路由动画的仓库。

here 你可以找到现场演示。

【参考方案3】：

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

npm install history@latest --save

【参考方案4】：

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

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

this.props.location.pathname

收件人： (React-Router-4)

this.props.history.location.pathname

【参考方案5】：

只需确保您已将 to 属性添加到 <Link>，否则您也会收到相同的错误。

添加后应该是这样的：-

<Link to="#">

【参考方案6】：

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

【讨论】：

这对我来说效果很好，谢谢先生！！

为我工作，谢谢！

【参考方案7】：

React Router v6 中的 API 与 v5 相比有所变化。

在下面查看接受的答案： "Cannot read properties of undefined (reading 'pathname')" when testing pages in the v6 React Router

【参考方案8】：

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

【参考方案9】：

您正在为 Link 元素的“to”道具提供未定义的值

import  Link  from "react-router-dom";

const path = undefined;

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