How do I redirect a user to another page when a countdown timer gets to 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");
}
}

//I want to redirect the user to a page called "time up" when the countdown gets to zero in the componentDidUpdate lifecycle

Possible duplicate of [How do I redirect to another webpage?](https://stackoverflow.com/questions/503093/how-do-i-redirect-to-another-webpage) — VLAZ, Jun 13 '19 at 05:40
Off topic: Shouldn't you be using `setTimeout` instead? Interval is for repeating events. If you insist, for some reason, on using interval, it should at least be cleared before you redirect the user, with `clearInterval(this.myInterval)` — Adam Gerthel, Jun 13 '19 at 06:00

Daniel Doblado · Answer 1 · 2019-06-13T06:14:27.047

0

Instead of browserHistory.push("/time-up");, add window.location = "/time-up"

edited Jun 13 '19 at 06:14

answered Jun 13 '19 at 05:49

Daniel Doblado

2,481
1
16
24

Done, I just updated my answer, I thought it was pretty clear, since he has similar code to do it. – Daniel Doblado Jun 13 '19 at 06:15

score 0 · Answer 2 · answered Jun 14 '19 at 06:50

You're trying to redirect to /time-up so I guess you're trying to do a internal navigation. You can do it by using the history prop coming from react-router

Instead of browserHistory.push("/time-up"); you can write this.props.history.push("/time-up")

If you don't have the history prop, you can inject by augmenting your component with the withRouter HOC

ravibagul91 · Answer 3 · 2019-06-14T07:16:11.357

0

To redirect from componentDidUpdate() use this,

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

Another way is to use Redirect from react-router-dom package,

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

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

Note: Your code snippet is messy, you are using componentDidUpdate inside componentDidMount? If yes, then you should not do that. Both are different methods and cannot be called inside another, place both differently.

edited Jun 14 '19 at 07:16

answered Jun 14 '19 at 07:10

ravibagul91

20,072
5
36
59

1

I used both lifecycle methods in different lines. I used the window.location.href and it worked, but I'll use the Redirect component since is cleaner. Thank you. – Manuel Helaman Soto Alvarez Jun 26 '19 at 02:20
@ManuelHelamanSotoAlvarez Great. If this solves your problem then you can mark it as accepted answer. – ravibagul91 Jun 26 '19 at 03:38

score -1 · Answer 4 · answered Nov 18 '20 at 03:29

-1

you need to decrement the time or it will sit at 6

answered Nov 18 '20 at 03:29

Taylen Schmaltz

1
1

How do I redirect a user to another page when a countdown timer gets to 0?

4 Answers4