React Router — syntax change from version 1.0 to 2.0

Question

ERROR MESSAGE

Warning: [react-router] It appears you have provided a deprecated history object to ``, please use a history provided by React Router with `import { browserHistory } from 'react-router'` or `import { hashHistory } from 'react-router'`. If you are using a custom history please create it with `useRouterHistory`, see http://tiny.cc/router-usinghistory for details.

QUESTION

Can someone please show me how to implement the react-router 2.0 syntax in my code below?

CODE

var React = require('react');
var ReactDOM = require('react-dom');
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route =  ReactRouter.Route;
var Navigation = ReactRouter.Navigation;

var StorePicker = React.createClass({

  render: function(){
    var name = "tim";
    return (
      <form className="store-selector">
        <div>
          <h2>Please enter a store {name}</h2>
          <input type="text" ref="storeId" required/>
          <input type="Submit"/>
        </div>
      </form>
    )
  }
});

var routes = (
  <Router history={browserHistory}>
    <Route path="/" component={StorePicker} />
    <Route path="/store/:storeId" component={App} />
  </Router>
)

ReactDOM.render(routes, document.querySelector('#main'));

Moritz Moritz · Accepted Answer · 2016-03-08T19:18:33

Did you actually read the link that the error message suggests?

// ReactRouter already 'require'd
var browserHistory = ReactRouter.browserHistory;
//...
<Router history={browserHistory} />

React Router — syntax change from version 1.0 to 2.0

2 Answers