React-Router - Uncaught TypeError: Kann Eigenschaft "route" von undefined nicht lesen

Question

versuchen, Router v4 mit Redux zu verwenden und in diesen Fehler zu laufen, scheinen die Dokumente zu folgen, konnten keine Informationen irgendwo darauf finden, damit ich ‚zu einem Verlust m:

Uncaught TypeError: Cannot read property 'route' of undefined

hier ist mein 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)); 

und hier ist der vollständige Fehler:

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

Sie brauchen nicht withRouter höher ist als Ihre tatsächliche Router zu verwenden ist :) es einfach entfernen:

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

Sie müssen withRouter HOC verwenden, wenn Sie historische Informationen innerhalb der Komponente in Route verschachtelt zugreifen möchten . Sie können Details hier finden: https://reacttraining.com/react-router/web/api/withRouter

Answer 2

Also ich habe diese von meinem lokalen Server ausgeführt, als ich es von einem Webpack-Server lief es funktionierte.

Answer 3

ich dieses Problem behoben meine meine <Navigation /> innen, indem <Router></Router>

Answer 4

Änderung der Router auf einen neuen reagieren Router 4.0 genannt "reagieren-Router-dom"

mit NPM/Garn das Modul „reagieren-Router installieren -dom ", definieren Sie Ihren Router so ..

nicht vergessen, Importe. {BrowserRouter, Route} von 'react-router-dom' importieren;

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

Answer 5

Hier, verwenden Sie reagieren-Router-dom neueste Version über 4.0.0.

Es ist also kein Router verfügbar. Sie müssen BrowserRouter in dieser Version verwenden.

Code

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

und verwenden BrowserRouter in Ihrer index.js Datei wird diese Komponente zu machen

import { BrowserRouter } from 'react-router-dom'; 
ReactDOM.render((<BrowserRouter><Manager/></BrowserRouter>), document.getElementById('root'));