History object issue with React-Router

Question

I am building a very simple webpage using React and React Router. I have installed the latest version of React Router module (v3.0.0) using NPM, written 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 property 'getCurrentLocation' of undefined(…)

When I inspect the error, this line is highlighted in Router.js:

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.

I have tried installing v3 of this history module using NPM but I'm still getting this error. I'm not even sure if that's what the error is asking me to do. Can anyone tell me if I'm doing the right thing?

Answer 1

It may be a bug from react-router 3.0, because I didn't find any place saying its required to pass the history on the docs. But you just need to pass one of the histories options to the Router. I've even seen an example without passing the history in the docs, that may be outdated.

Basically all you need 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>
);
...

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