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="/" ponent={Menu}/>
                  <Route path="/menu" ponent={Menu}/>
                  <Route path="/play" ponent={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 RouteputeMatch (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)

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="/" ponent={Menu}/>
                  <Route path="/menu" ponent={Menu}/>
                  <Route path="/play" ponent={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.puteMatch (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)

• javascript
• reactjs
• redux
• react-router
• react-router-v4

• Did you try to change from 'react-router-dom' to from 'react-router'? – Maxim Shoustin Commented Apr 11, 2017 at 15:50
• 1 Try importing withRouter from 'react-router' like import {withRouter} from 'react-router' – Shubham Khatri Commented Apr 11, 2017 at 16:11
• Neither of those approaches work either unfortunately. – Rob McMackin Commented Apr 12, 2017 at 4:49
• no solutions yet? this problem is utterly annoying – pietro909 Commented Apr 18, 2017 at 21:50
• I've answered the same question here stackoverflow./questions/43175941/… please check it out and see if it solves your problem, too. – pietro909 Commented Apr 19, 2017 at 13:54

5 Answers 5

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="/" ponent={Menu}/>
              <Route path="/menu" ponent={Menu}/>
              <Route path="/play" ponent={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'));

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="/" ponent={Menu}/>
              <Route path="/menu" ponent={Menu}/>
              <Route path="/play" ponent={Play}/>
              </div>
          </BrowserRouter>

You don't need to use withRouter higher than your actual Router is :) Just remove it:

export default connect(mapStateToProps, mapDispatchToProps)(Manager);

You will need to use withRouter HOC, if you want to access history information inside the ponent nested in Route. You can find details here: https://reacttraining./react-router/web/api/withRouter

So I was running this off my local server, when I ran it off a webpack server it worked.

I fixed this by moving my <Navigation /> inside my <Router></Router>