React-Router - Uncaught TypeError: Cannot read getCurrentLocation property from undefined

Question

I am using the latest version of react-router (version ^ 3.0.0).

I wrote the following routing using ES5:

routes.js :

 var React = require("react"); var Router = require("react-router"); var AuthorPage = require('./components/authors/authorPage') var App = require('./components/app') var Route = Router.Route; var routes = ( <Route path="/" component={App}> <Route path="authors" component={AuthorPage}/> </Route> ); module.exports = routes; 

In another JS file called main.js I make the following call:

main.js :

 var React= require("react"); var ReactDom = require("react-dom"); var Router = require('react-router').Router; var routes = require('./routes'); ReactDom.render(<Router routes={routes}></Router>, document.getElementById('app')); 

When I run the code, I get the following exception in the Google Chrome Developer Tools:

Uncaught TypeError: Unable to read getCurrentLocation undefined property

Why? What am I missing?

Answer 1

You do not share the story with your <Router> .

View the documentation history for more information.

Answer 2

Had the same error, solved it like this:

Add

 var hashHistory = ReactRouter.hashHistory; 

And in the Router set, the story is hashHistory

 <Router history={hashHistory}> 

So in your case:

 var routes = ( <Router history={hashHistory}> <Route path="/" component={App}> <Route path="authors" component={AuthorPage}/> </Route> </Router> );