React-Router的歷史對象問題

Question

我正在使用React和React Router構建一個非常簡單的網頁。 我使用NPM安裝了最新版本的React Router模塊（v3.0.0），在index.js文件中編寫了3條非常簡單的路由：

import React, {Component} from 'react';
import {render} from 'react-dom';
import {Router, Route} from 'react-router';
//Import custom components
import About from '../components/about.js';
import Contact from '../components/contact.js';
import Sidebar from '../components/sidebar.js';
import Imagelist from '../components/image-list.js';


  render(
      <Router>
        <Route component={Sidebar}>
          <Route path="/" component={Imagelist}/>
          <Route path="/about" component={About}/>
          <Route path="/contact" component={Contact}/>
        </Route>
      </Router>,
      document.getElementById('content')
    );

但是當我嘗試在本地打開頁面時，我不斷在控制台中收到此錯誤：

未捕獲的TypeError：無法讀取未定義的屬性'getCurrentLocation'（...）

當我檢查錯誤時，此行在Router.js中突出顯示：

您已提供使用history v2.x或更早版本創建的歷史記錄對象。 此版本的React Router僅與v3歷史對象兼容。 請升級到歷史v3.x.

我已經嘗試使用NPM安裝此歷史模塊的v3但我仍然收到此錯誤。 我甚至不確定這是錯誤要求我做的。 任何人都可以告訴我，如果我做對了嗎？

Answer 1

它可能是來自react-router 3.0的錯誤，因為我沒有找到任何地方說它需要傳遞文檔的history 。 但您只需要將其中一個歷史選項傳遞給Router 。 我甚至看過一個沒有通過文檔歷史的例子，這可能已經過時了。

基本上你需要做的就是：

import {Router, Route, browserHistory} from 'react-router';
...
return (
  <Router history={browserHistory}>
    <Route component={Sidebar}>
      <Route path="/" component={Imagelist}/>
      <Route path="/about" component={About}/>
      <Route path="/contact" component={Contact}/>
    </Route>
  </Router>
);
...

在這里查看更多詳細信息https://github.com/ReactTraining/react-router/blob/master/docs/guides/Histories.md