Trying to use react router v4 with redux and running into this error, seem to be following the docs, couldn't find any information anywhere on it so I'm at a loss:
Uncaught TypeError: Cannot read property 'route' of undefined
Here's my code:
import React, {Component} from 'react';
import {
BrowserRouter as Router,
Route,
Link,
withRouter
} from 'react-router-dom'
import Menu from './Menu';
import { connect } from "react-redux";
import Play from './Play';
class Manager extends Component {
render() {
return(
<Router>
<div>
<Route exact path="/" component={Menu}/>
<Route path="/menu" component={Menu}/>
<Route path="/play" component={Play}/>
</div>
</Router>
)
}
}
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Manager));
and here's the full error:
game.js:26838 Uncaught TypeError: Cannot read property 'route' of undefined
at Route.computeMatch (game.js:26838)
at new Route (game.js:26815)
at game.js:15322
at measureLifeCyclePerf (game.js:15102)
at ReactCompositeComponentWrapper._constructComponentWithoutOwner (game.js:15321)
at ReactCompositeComponentWrapper._constructComponent (game.js:15307)
at ReactCompositeComponentWrapper.mountComponent (game.js:15215)
at Object.mountComponent (game.js:7823)
at ReactCompositeComponentWrapper.performInitialMount (game.js:15398)
at ReactCompositeComponentWrapper.mountComponent (game.js:15285)
Here,you are using react-router-dom latest version above 4.0.0.
So,there is no Router available. You need to use BrowserRouter in this version.
your code will be
import React, {Component} from 'react';
import {
Switch,
Route,
Link,
withRouter
} from 'react-router-dom'
import Menu from './Menu';
import { connect } from "react-redux";
import Play from './Play';
class Manager extends Component {
render() {
return(<div>
<Switch>
<Route exact path="/" component={Menu}/>
<Route path="/menu" component={Menu}/>
<Route path="/play" component={Play}/>
</Switch></div>
)
}
}
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Manager));
and use BrowserRouter in your index.js file to render this Component
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render((<BrowserRouter><Manager/></BrowserRouter>), document.getElementById('root'));