CODEWITHSUNDEEP
reactjsreact-routerecmascript-5
sppc42
sppc42

Reputation: 3292

Router` no longer defaults the history prop to hash history

Using React-Router in ES5, I have the below code

var React = require('react');
var Render = require('react-dom').render;
var Router = require('react-router').Router;
var Route = require('react-router').Route;
var hashHistory = Router.hashHistory;
var browserHistory = Router.browserHistory;

var About = require('./components/about/aboutPage');

var routes = (
    <Router>
        <Route path="/" handler={App}>
            <Route path="about" handler={About}/>
        </Route>
  </Router>
);

module.exports = routes;

This is rendered in {main.j} as 

var ReactDOM = require('react-dom');
var Router = require('react-router').Router;
var routes = require('./routes');

ReactDOM.render(<Router>{routes}</Router>, document.getElementById('app'));

However, in the console, am getting this warning and nothing loads up:

bundle.js:1845 Warning: [react-router] `Router` no longer defaults the history prop to hash history. Please use the `hashHistory` singleton instead

I have clearly passed {hashHistory} in the code above, but still it keeps on complaining.

Any hints on what could be going wrong?

Thanks

Upvotes: 1

Views: 1868

Answers (2)

sppc42
sppc42

Reputation: 3292

Found the reason - It was an issue with my rendering code

ReactDOM.render(<Router>{routes}</Router>, document.getElementById('app'));

as {routes} already contained {}, there was no need to specify it again whilst rendering. Because of this, ofcourse, {history} prop was missing in the render code. So, I just changed the render code to:

ReactDOM.render(routes, document.getElementById('app'));

and it works perfectly fine!

Thanks

Upvotes: 1

Shubham Khatri
Shubham Khatri

Reputation: 281764

No you didn't.You have just defined it and not used it. You have to pass history={hashHistory} in the router Tag.

var React = require('react');
var Render = require('react-dom').render;
var Router = require('react-router').Router;
var Route = require('react-router').Route;
var hashHistory = Router.hashHistory;
var browserHistory = Router.browserHistory;

var About = require('./components/about/aboutPage');

var routes = (
    <Router history={hashHistory}>
        <Route path="/" handler={App}>
            <Route path="about" handler={About}/>
        </Route>
  </Router>
);

module.exports = routes;

P.S. react-router 2.8.0 requires react v15.3.0 and above. Visit the following link.

https://www.versioneye.com/nodejs/react-router/2.8.0

If you dont have this, I would suggest you use react-router v2.0.0 or update you react to the required version.

Upvotes: 1

Related Questions