Question

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

未捕获的TypeError：无法读取属性＆＃39;路径名＆＃39;未定义的在新的路由器

这是我的代码：

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我有一个带路由动画的回购。

here您可以找到现场演示。

Answer 2

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

原来我不小心忘记将<FileWidget setInputRef={ref => { this.inputRef = ref } ... />道具包含在其中一个to组件中。

希望错误消息更好。一个简单的<Link />或类似的东西会有所帮助。希望这能节省一些遇到同样问题的人。

Answer 3

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

解决了这个错误

npm install history @ latest --save

Answer 4

我有一个不同的原因，但有相同的错误，因此遇到了这个问题。将其放在此处，以防其他人遇到同样的情况，这可能会有所帮助。对我来说，问题是我已更新为react-router-4，并且访问pathname有所更改。

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

this.props.location.pathname

收件人： （React-Router-4）

this.props.history.location.pathname

Answer 5

请确保在COMMIT;上添加to道具，否则也会出现相同的错误。

反应路由器：无法读取属性＆＃39;路径名＆＃39;未定义的

5 个答案: