我正在使用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') );
Uncaught TypeError: Cannot read property ‘getCurrentLocation’ of undefined(…)
You have provided a history object created with history v2.x or earlier. This version of React Router is only compatible with v3 history objects. Please upgrade to history v3.x.
我已经尝试使用NPM安装此历史模块的v3但我仍然收到此错误.我甚至不确定这是错误要求我做的.任何人都可以告诉我,我做对了吗?
解决方法
它可能是来自react-router 3.0的错误,因为我没有找到任何地方说它需要传递文档的历史记录.但您只需要将其中一个历史选项传递给路由器.我甚至看过一个没有通过
docs历史的例子,可能已经过时了.
基本上你需要做的就是:
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