Как перенаправить пользователя на другую страницу, когда таймер обратного отсчета достигает 0?

Question

constructor(){
    super()

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

    this.myInterval = setInterval(() =>{
        browserhistory.push("/time-up")componentDidUpdate(){
    if(this.state.countDown === 0){
      browserHistory.push("/time-up");
}
}

// Я хочу перенаправить пользователя на страницу, которая называется «время истекло», когда обратный отсчет обнуляется в жизненном цикле componentDidUpdate

Answer 1

Вы пытаетесь перенаправить на / time-up, поэтому, я думаю, вы пытаетесь выполнить внутреннюю навигацию. Вы можете сделать это, используя реквизит истории, поступающий от реакции-маршрутизатора

Вместо browserHistory.push("/time-up"); вы можете написать this.props.history.push("/time-up")

Если у вас нет реквизита истории, вы можете сделать инъекцию, увеличив свой компонент с помощью withRouter HOC

Answer 2

Для перенаправления с componentDidUpdate() используйте это,

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

Другой способ - использовать Redirect из пакета react-router-dom,

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

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

Примечание. Ваш фрагмент кода грязный, вы используете componentDidUpdate внутри componentDidMount? Если да, то вы не должны этого делать. Оба являются разными методами и не могут быть вызваны внутри другого, поместите оба по-разному.

Answer 3

Вместо browserHistory.push("/time-up");, добавьте window.location = "/time-up"