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