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?
You are not passing a history to your <Router>
.
Check out the histories documentation for more information.