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?

Perhaps you should also add some code to your question. – Kevin Nov 07 '16 at 00:07 — Kevin, Nov 07 '16 at 00:07

André Junges · Accepted Answer · 2016-11-08T01:17:23.843

12

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

edited Nov 08 '16 at 01:17

answered Nov 07 '16 at 00:46

André Junges

5,297
3
34
48

Awesome, thanks! That fixed it. Do you know why this `browserHistory` needs to be imported? – Maxine Ellah Nov 07 '16 at 23:23
@MaxineEllah as you can see in the docs https://github.com/ReactTraining/react-router/blob/master/docs/guides/Histories.md there are multiple types of history objects (`browserHistory`, `hashHistory`...), and I thought that there was a default one, so you wouldnt need to pass any if you didnt need to customize it. But it seems its required that you pass one, I asked it in an issue in their repo. You can follow it here https://github.com/ReactTraining/react-router/issues/4097 – André Junges Nov 08 '16 at 01:19
Thank you that's really helpful. – Maxine Ellah Nov 11 '16 at 04:07
1

@AndréJunges Thanks just got started with my first react project last week and stumbled upon this issue.. – Amitesh Rai Nov 22 '16 at 17:23
@holms actually it does, try to verify the installed versions of the libraries you're using.. and if you provide more information we can try to help you :) – André Junges Dec 22 '16 at 01:44
@AndréJunges Ended up using this import. Although it says something about wrong order of imports. i had to use es2015 babel preset to make this work. – holms Dec 23 '16 at 16:55

History object issue with React-Router

1 Answers1

Linked