web-dev-qa-db-fra.com

react-router "Impossible de lire la propriété 'Push' de non défini"

je suis tout à fait nouveau pour réagir et réagir-routeur.

Le problème avec react est ici que, sur certaines pages de mon application, react-router fonctionne et certains donnent une erreur comme celle-ci: "Impossible de lire la propriété 'Push' d'un indéfini".

j'utilise React 0.14.1

Mon code de routage ressemble à ceci:

render(
<Router history={hashHistory}>
  <Route path="/" component={Loginpanel}/>
  <Route path="Index" component={Index}/>
  <Route path="Form" component={Form} />
  <Route path="Checkindex" component={Index}/>

  <Route path="Signup" component={Signup}/>
  <Route path="Admin" component={Admin}/>
  <Route path="AdminEditDetails" component={AdminEditDetails}/>
  <Route path="AdminDetails" component={AdminDetails}/>


</Router>,
document.getElementById('js-main'));

Mon composant est comme ça maintenant:

class  App extends React.Component {

  constructor(props) {
    super(props);
    this.state= {      
      comments: AppStore.getAll();
    };
  }

  componentWillMount() {  
    var length = this.state.comments.length;
    var firstnumber = length - 4;

    if(length == 0){
      console.log("here comes");
      this.props.router.Push('/');
    }
    else{
      console.log('work normally');
    }
  }

}

Est-ce que quelqu'un peut m'aider avec ça? Merci.

javascriptreactjsreact-routerreact-router-component
7
user6730596

Votre application n'a pas d'instance de routeur dans ses accessoires qui vous donne Cannot read property 'Push' of undefined.

Je suppose que vous importez avecRouter pour obtenir l'instance du routeur, vous devez donc envelopper le composant si vous voulez toujours l'utiliser ... (exemple ici mais pas suggéré )

Au lieu de cela, une meilleure approche de la navigation par programme consiste à utiliser

import { hashHistory } from 'react-router;' ... hashHistory.Push('/'); dans votre componentWillMount événement de cycle de vie.

Les documents sont ici

J'espère que cela t'aides!

3
Patrick Pei

Utiliser hashHistory directement à partir de react-router Est certainement une option, mais cela rend les tests unitaires un peu plus pénibles. L'historique du navigateur ne sera généralement pas disponible dans les tests de contexte exécutés et il est plus facile de se moquer d'un accessoire que de se moquer d'une API globale.

Pensez à utiliser le withRouter composant d'ordre supérieur fourni par react-router (Depuis v2.4.0).

import { withRouter } from 'react-router';

class App extends Component {

    (...)

}

export default withRouter(App);

Votre classe App recevra router via des accessoires et vous pourrez faire this.props.router.Push('/'); en toute sécurité.

7
ivarni

Si vous utilisez un composant partiel et l'appelez comme <Header /> alors vous devez le remplacer par <Header {...this.props} />

5
Jitendra Suthar

Vous utilisez hashHistory. Le code suivant devrait fonctionner.

import { hashHistory } from 'react-router';
hashHistory.Push('/');

La route racine doit également être définie.

<Route path="/" component={App}>
0
vijayst

vous pouvez essayer le code ci-dessous pour voir si votre router props fonctionne ou non

componentWillMount() {

var length = this.state.comments.length;
var firstnumber = length - 4;
if(length == 0){
    console.log("here comes");
  if(this.props.router !== undefined) {
    this.props.router.Push('/');
  } else {
    console.log(this.props.router);
  }
}
else{
    console.log('work normally');
}
}

vous pouvez également visiter leur documentation pour obtenir plus d'informations sous l'URL https://github.com/reactjs/react-router/blob/master/docs/guides/NavigatingOutsideOfComponents.md

0
Md.Estiak Ahmmed