React-Router - Uncaught TypeError: Cannot read property 'route' of undefined

Question

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)

Answer 1

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'));

Answer 2

change your router to a new react router 4.0 called "react-router-dom"

using npm/yarn install the module "react-router-dom", define your router like so..

don't forget imports. import { BrowserRouter, Route } from 'react-router-dom';

         <BrowserRouter>
              <div>
              <Route exact path="/" component={Menu}/>
              <Route path="/menu" component={Menu}/>
              <Route path="/play" component={Play}/>
              </div>
          </BrowserRouter>