React Router and History

Question

Hello I'm really new to react and I'm watching this wonderful youtube ReactJs tutorial from Learncode.academy. This tutorial is from last year I don't know if these modules are already deprecated. I got these error messages:

You have provided a history object created with history v4.x or v2.x and earlier. This version of React Router is only compatible with v3 history objects. Please change to history v3.x. at invariant Here is my code:

    import Layout from "./components/Layout";
    import { Router, Route, IndexRoute, browserHistory } from "react-router";

    const app = document.getElementById('app');

    ReactDOM.render(
      <Router history="{browserHistory}">
       <Route path="/" component="{Layout}">
       </Route>
      </Router>,
    app);

Here is my package.json

"history": "^3.2.1",
"react-router": "^3.0.2",

Any suggestion would be highly appreciated! Thanks!

Answer 1

You are using the history and the components incorrectly. You dont need quotes around the history and component objects

import Layout from "./components/Layout";
import { Router, Route, IndexRoute, browserHistory } from "react-router";

const app = document.getElementById('app');

ReactDOM.render(
  <Router history={browserHistory}>
   <Route path="/" component={Layout}>
   </Route>
  </Router>,
app);