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

Question

我刚刚开始学习 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"

原文由 Alon 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

您可以查看 文档 以了解它现在是如何工作的。

在这里，我有一个带有路由动画的仓库。

在这里 你可以找到一个现场演示。

原文由 Arnold Gandarillas 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

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

原文由 Brennan Cheung 发布，翻译遵循 CC BY-SA 3.0 许可协议