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!
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);
From https://github.com/ReactTraining/react-router/issues/353
To get basename working for react-router@3.0.2:
(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'))