web-dev-qa-db-fra.com

React-Router - UnCaught TypeError: Impossible de lire la propriété 'route' de indéfini

Essayer d'utiliser Reactor Routeur v4 avec Redux et rencontrer cette erreur semble suivre les documents, je n'ai trouvé aucune information là-dessus, donc je suis à perte:

TypeError non capturé: impossible de lire la propriété 'route' de undefined

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

et voici l'erreur complète:

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)
javascriptreactjsreduxreact-routerreact-router-v4
10
Rob McMackin

Ici, vous utilisez la dernière version de react-router-dom au-dessus de 4.0.0.

Il n'y a donc pas de routeur disponible. Vous devez utiliser BrowserRouter dans cette version.

votre code sera

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

et utilisez BrowserRouter dans votre fichier index.js pour rendre ce composant

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

changez votre routeur en un nouveau routeur réactif 4.0 appelé "react-router-dom"

en utilisant npm/yarn installez le module "react-router-dom", définissez votre routeur comme ça ..

n'oubliez pas les importations. importer {BrowserRouter, Route} depuis 'react-router-dom';

         <BrowserRouter>
              <div>
              <Route exact path="/" component={Menu}/>
              <Route path="/menu" component={Menu}/>
              <Route path="/play" component={Play}/>
              </div>
          </BrowserRouter>
2
Evil Dr. PorkChop

J'ai donc exécuté cela sur mon serveur local, quand je l'ai exécuté sur un serveur Webpack, cela a fonctionné.

0
Rob McMackin

J'ai corrigé cela en déplaçant mon <Navigation /> dans mon <Router></Router>

0
shay

Vous n'avez pas besoin d'utiliser withRouter plus haut que votre routeur réel :) Retirez-le simplement:

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

Vous devrez utiliser withRouter HOC, si vous souhaitez accéder aux informations d'historique à l'intérieur du composant imbriqué dans Route. Vous pouvez trouver des détails ici: https://reacttraining.com/react-router/web/api/withRouter

0
Антон Досов