2017-10-12 3 views
0

Je travaille sur une fonctionnalité de fermeture de session avec Meteor/Reactutilisation withRouter avec CreateContainer et utiliser l'histoire

import React from 'react'; 
import { Accounts } from 'meteor/accounts-base'; 
import createHistory from 'history/createBrowserHistory'; 
import propTypes from 'prop-types'; 
import { withRouter } from 'react-router-dom'; 
import { createContainer } from 'meteor/react-meteor-data'; 

const PrivateHeader = (props) => { 
    return (
    <div className="header"> 
     <div className="header__content"> 
     <h1 className="header__title">{props.title}</h1> 
     <button className="button button--link-text" onClick={ props.handleLogout() }>Logout</button> 
     </div> 
    </div> 
); 
}; 

PrivateHeader.propTypes = { 
    title: propTypes.string.isRequired, 
    handleLogout: propTypes.func.isRequired 
}; 

export default withRouter(createContainer(() => { 
    return { 
    handleLogout:() => { 
     Accounts.logout(), 
     this.props.history.push('/') 
    } 
    }; 
}, PrivateHeader)); 

Cependant, je reçois une erreur

Exception in delivering result of invoking 'login': TypeError: Cannot read property 'history' of undefined 
    at Object.handleLogout (http://localhost:3000/app/app.js?hash=e7e6866f8eccc90d612186214db7d5c0717e09d5:843:38) 
    at PrivateHeader (http://localhost:3000/app/app.js?hash=e7e6866f8eccc90d612186214db7d5c0717e09d5:828:26) 
    at http://localhost:3000/packages/modules.js?hash=4b565562fa4100dc773fad2b7836f486fe1cb6aa:11904:16 

Je ne suis pas sûr de savoir comment contourner ce problème Erreur. J'ai essayé d'utiliser const history = createHistory() sans effet.

Les dépendances que je utilise sont:

"dependencies": { 
    "babel-runtime": "^6.20.0", 
    "history": "^4.7.2", 
    "meteor-node-stubs": "~0.2.4", 
    "moment": "^2.18.1", 
    "prop-types": "^15.5.10", 
    "react": "^15.6.2", 
    "react-addons-pure-render-mixin": "^15.6.2", 
    "react-dom": "^15.6.1", 
    "react-router": "^4.1.2", 
    "react-router-dom": "^4.1.2", 
    "simpl-schema": "^0.3.2" 
    }, 

Répondre

0

Je vois que vous utilisez DOM Router React. Pourquoi ne pas utiliser la méthode browserHistory de 'react-router'?

import { browserHistory } from 'react-router'; 

Et puis

Accounts.logout(); 
browserHistory.push('/'); 
+0

Je reçois maintenant ne peut pas pousser d'erreur non définie. – user8768174

+0

@ user8768174 Êtes-vous sûr de bien exécuter le code? Avez-vous supprimé votre 'this.props.history.push ('/')'? Si vous importez correctement 'browserHistory', vous ne pouvez pas obtenir cette erreur. Les erreurs vous indiquent que vous essayez d'appeler la méthode 'push' sur quelque chose qui n'est pas défini –

+1

J'ai finalement compris que c'était une erreur stupide que je devais passer des accessoires dans createContainer – user8768174