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

Rob McMackin picture Rob McMackin · Apr 11, 2017 · Viewed 12k times · Source

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

Chandrakant Thakkar picture Chandrakant Thakkar · Jul 19, 2017

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