Problem with historical object using React-Router

Question

I am creating a very simple webpage using a React and React Router. I installed the latest version of the React Router module (v3.0.0) using NPM, wrote 3 very simple routes in my index.js file:

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

But when I try to open the page locally, I keep getting this error in the console:

Uncaught TypeError: cannot read getCurrentLocation property from undefined (...)

When I check for an error, this line is highlighted in Router.js:

You have provided a story object created with story v2.x or earlier. This version of React Router is compatible with v3 story objects only. Update v3.x.

I tried installing v3 of this story module using NPM, but I still get this error. I'm not even sure what the mistake asks me to make. Can someone tell me if I am doing the right thing?

Answer 1

This may be a bug from response-router 3.0, because I did not find a place requiring the transfer of history in the documents. But you just need to pass one of the story options to Router . I even saw an example without passing history to docs , which might be deprecated.

Basically all you have to do is:

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

Read more here https://github.com/ReactTraining/react-router/blob/master/docs/guides/Histories.md