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>

Answer 3

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 component nested in Route. You can find details here: https://reacttraining.com/react-router/web/api/withRouter

Answer 4

因此，当我从可运行的webpack服务器上运行它时，我是在本地服务器上运行它。

Answer 5

我通过在<Router></Router>内移动<Navigation />解决此问题