React-Router - Uncaught TypeError: Cannot read property 'getCurrentLocation' of undefined

ReactjsReact RouterBrowserify

Reactjs Problem Overview


I'm 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 perform 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 Google Chrome developer tools:

> Uncaught TypeError: Cannot read property 'getCurrentLocation' of > undefined

Why is that? What am I missing?

Reactjs Solutions


Solution 1 - Reactjs

You are not passing a history to your <Router>.

Check out the histories documentation for more information.

Solution 2 - Reactjs

Had the same error, solved it this way:

Add

var hashHistory = ReactRouter.hashHistory;

And in the Router set the history equals to hashHistory

<Router history={hashHistory}>

So in your case:

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionSyndicatorBBBView Question on Stackoverflow
Solution 1 - ReactjsPaul SView Answer on Stackoverflow
Solution 2 - ReactjsleleView Answer on Stackoverflow