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!

Check this out: http://stackoverflow.com/questions/40455999/history-object-issue-with-react-router Might help — Ricky Mutschlechner, Jan 26 '17 at 06:36

score 3 · Accepted Answer · answered Jan 26 '17 at 06:37

3

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);

answered Jan 26 '17 at 06:37

Shubham Khatri

270,417
55
406
400

sometimes its hard to figure out the solution specially when the error doesnt lead you to the right path. I hope it solves your problem – Shubham Khatri Jan 26 '17 at 06:44

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

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

To get basename working for react-router@3.0.2:

npm install --save react-router@3.0.2

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 react-router@3.0.2)

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='/' component={Layout}>
      <IndexRoute component={HomeView} />
      <Route path='other-views' component={OtherViews} />
    </Route>
  </Router>
), document.getElementById('main'))

React Router and History

2 Answers2

npm install --save react-router@3.0.2

npm install --save history@^3.0.0