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

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

本教程，我以下用途做出反应，路由器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

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

npm install history@latest --save