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 patible with v3 history objects. Please change to history v3.x. at invariant Here is my code:

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

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

    ReactDOM.render(
      <Router history="{browserHistory}">
       <Route path="/" ponent="{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!

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 patible with v3 history objects. Please change to history v3.x. at invariant Here is my code:

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

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

    ReactDOM.render(
      <Router history="{browserHistory}">
       <Route path="/" ponent="{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!

• javascript
• reactjs
• ecmascript-6
• react-router

• Check this out: stackoverflow./questions/40455999/… Might help – Ricky Mutschlechner Commented Jan 26, 2017 at 6:36

2 Answers 2

You are using the history and the ponents incorrectly. You dont need quotes around the history and ponent objects

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

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

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

From https://github./ReactTraining/react-router/issues/353

To get basename working for [email protected]:

npm install --save [email protected]

npm install --save history@^3.0.0

(check react-router package.json to get the correct history version to use, current major version of history is 4.x and won't work with [email protected])

import React from 'react'
import { render } from 'react-dom'
import { Router, Route, IndexRoute, useRouterHistory } from 'react-router'
import { createHistory } from 'history'

const history = useRouterHistory(createHistory)({
  basename: '/subdirectory-where-the-app-is-hosted-goes-here'
})

render((
  <Router history={history}>
    <Route path='/' ponent={Layout}>
      <IndexRoute ponent={HomeView} />
      <Route path='other-views' ponent={OtherViews} />
    </Route>
  </Router>
), document.getElementById('main'))