我正在使用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中突出显示:
您提供了使用历史记录v2.x或更早版本创建的历史记录对象。此版本的React Router仅与v3历史记录对象兼容。请升级到历史记录v3.x。
我尝试使用NPM安装此历史记录模块的v3,但仍收到此错误。我什至不确定那是否是错误要我做的事情。谁能告诉我我做对了吗?
这可能是react-router 3.0的一个错误,因为我没有找到任何地方说它需要通过historydocs。但是,您只需要将“历史记录”选项之一传递给即可Router。我什至看过一个示例,但都没有在docs中传递历史记录,这可能已经过时了。
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