reactjs with react-router doesn't work

Question

I'm trying to get a simple reactjs SPA with nodejs running, but my Router won't work correctly. I created a new App with create-react-app and added npm install react-router. My package.json is

{
"name": "App",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^15.5.0",
"react-dom": "^15.5.0",
"react-router": "^4.0.0"
    },
"devDependencies": {
    "react-scripts": "0.9.5"
},
"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
}
}

I just put the react components in a different folder to src/compoents/ and my index.js is

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App'
import { Router, Route, IndexRoute, hashHistory } from 'react-router'

ReactDOM.render(
    <App />,
    document.getElementById('root')
);

This works as aspected. The App comes up and shows the hello world example from reactjs. But when I replace the App with the Router

<Router history={ hashHistory }>
    <Route path='/' component={ App }/>
</Router>

The App breaks. Even with IndexRoute, the App doesn't work.

Changing hasHistory to browserHistory or createMemoryHistory doesn't change anything.

Could you please give me a hint in the right direction, what I'm missing?

in the console I get a warning that the history is required TypeError: this.props.history is undefined Warning: Failed prop type: The prop history is marked as required in Router, but its value is undefined. in Router (at index.js:8) — HexXx
You are initializing react-router in the pre version 4.0 manner, check the docs for setting up react-router 4.0 or downgrade to an older version of the package — Rob M.

HexXx HexXx · Accepted Answer · 2017-04-08T12:20:41

@Rob M. you are my hero! Thank you! That was exactly the point.

When I changed the version of react-router to 2.8. as you suggested, it worked just fine.

If I understood the docs correctly, its advised to use the react-router-dom instead with the higher level router

<BrowserRouter>
<HashRouter>
<MemoryRouter>
<NativeRouter>
<StaticRouter>

Did I got this correctly?

reactjs with react-router doesn't work

1 Answers