React Router:无法读取undefined的属性'pathname'

Question

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

未捕获的TypeError:无法在新路由器上读取未定义的属性"pathname"

这是我的代码:

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')
);

您可以查看文档以了解它现在的工作原理.

这里我有一个带路由动画的回购.

而在这里,你可以找到一个现场演示.

Answer 2

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

结果我不小心忘了to在其中一个<Link />组件中包含道具.

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

Answer 3

原来import Matter和Router的顺序应该是在前的

不正确

import { BrowserRouter as Route, Router, Routes } from "react-router-dom";

正确的

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

Answer 4

只需确保您已添加toprops 即可<Link>否则您也会收到相同的错误。

添加后它应该看起来像这样：-

<Link to="#">

Answer 5

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

Answer 6

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

npm install history@latest --save

Answer 7

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

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

this.props.location.pathname

至： （React-Router-4）

this.props.history.location.pathname

Answer 8

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

请参阅以下接受的答案： “在 v6 React Router 中测试页面时，无法读取未定义的属性（读取“路径名”）”

Answer 9

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

Answer 10

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

Answer 11

使用BrowserRouter而不是Router作为包装器，并且不要忘记导入BrowserRouter

<BrowserRouter>
    // Rest of the app.
</BrowserRouter>

当您使用 Link 并忘记提及“/”属性时，也会出现此错误。