Rick Z Rick Z - 23 days ago 45
React JSX Question

React Router issues

I'm learning react-router, but I don't use Node as server. What I'm doing is to put all of files in /htdocs of XAMPP on MacOSX and previously all of the code was fine until I add the react router. The error on console is:
Uncaught TypeError: Cannot read property 'getCurrentLocation' of undefined.

The sample code as follow:

//app.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, hashHistory, IndexRoute} from 'react-router';
import App from './component/App.jsx';
import Home from './component/Home.jsx';
import Repos from './component/Repos.jsx';
import About from './component/About.jsx';
ReactDOM.render(
<Router>
<Route path="/" component={App}>
<IndexRoute component={Home}/>
<Route path="/repos/:name" component={Repos} />
<Route path="/about" component={About} />
</Route>
</Router>,
document.getElementById('app')
);


Here is my webpack config

var config = {
entry: './index.jsx',
output: {
path: './',
filename: 'index.js'
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',

query: {
presets: ['es2015', 'react']
}
}
]
}
}
module.exports = config;


There is no problem when I render any of single component I imported, just simple static component, I show one of these here:

//Home.jsx
import React from 'react';
const Home = () => (
<div>Home</div>
);
export default Home;


Can anyone help me to solve this problem?

Answer

Change your to:

<Router history={browserHistory}>

Worked for me.