2
votes

Comment rediriger un utilisateur vers une autre page lorsqu'un compte à rebours arrive à 0?

constructor(){
    super()

    this.state = {
        countDown: 6
    }}
componentDidMount(){

    this.myInterval = setInterval(() =>{
        browserhistory.push("/time-up")componentDidUpdate(){
    if(this.state.countDown === 0){
      browserHistory.push("/time-up");
}
}
//I want to redirect the user to a page called "time up" when the countdown gets to zero in the componentDidUpdate lifecycle

javascript reactjs react-router

2 commentaires

Copie possible de Comment rediriger vers une autre page Web?

Hors sujet: Ne devriez-vous pas utiliser setTimeout place? L'intervalle sert à répéter les événements. Si vous insistez, pour une raison quelconque, sur l'utilisation d'intervalle, il devrait au moins être effacé avant de rediriger l'utilisateur, avec clearInterval(this.myInterval)

4 Réponses :

0
votes

Au lieu de browserHistory.push("/time-up"); , ajoutez window.location = "/time-up"

1 commentaires

C'est fait, je viens de mettre à jour ma réponse, je pensais que c'était assez clair, car il a un code similaire pour le faire.

0
votes

Vous essayez de rediriger vers / time-up, donc je suppose que vous essayez de faire une navigation interne. Vous pouvez le faire en utilisant le support d'historique provenant de react-router

Au lieu de browserHistory.push("/time-up"); vous pouvez écrire this.props.history.push("/time-up")

Si vous ne disposez pas de l'historique, vous pouvez injecter en augmentant votre composant avec le withRouter HOC

0 commentaires

0
votes

Pour rediriger depuis componentDidUpdate() utilisez ceci,

import { Redirect } from 'react-router-dom';

componentDidUpdate(){
    if(this.state.countDown === 0){
       <Redirect to={'/time-up'} />
    }
}

Une autre façon est d'utiliser la redirection depuis le paquet react-router-dom ,

componentDidUpdate(){
    if(this.state.countDown === 0){
       window.location.href = "/time-up"
    }
}

Remarque: votre extrait de code est désordonné, vous utilisez componentDidUpdate dans componentDidMount ? Si oui, vous ne devriez pas faire cela. Les deux sont des méthodes différentes et ne peuvent pas être appelées dans une autre, placez les deux différemment.

2 commentaires

J'ai utilisé les deux méthodes de cycle de vie dans différentes lignes. J'ai utilisé le window.location.href et cela a fonctionné, mais j'utiliserai le composant Redirect car il est plus propre. Merci.

@ManuelHelamanSotoAlvarez Super. Si cela résout votre problème, vous pouvez le marquer comme réponse acceptée.

-1
votes

vous devez décrémenter le temps ou il restera à 6

0 commentaires