Friday, 7 April 2017

reactjs with react-router doesn't work

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?



via HexXx