How to redirect to another page when the current page is refreshed Reactjs

Question

I want to redirect to previous page when the current page is reloaded or refreshed,

constructor(props) {
    super(props);
    this.onUnload = this.onUnload.bind(this);
    this.onbeforeunload= this.onbeforeunload.bind(this)
    this.state = {
      show_answers: [],
      other_data: [],
      question: "",
      answer: "",
      id: 0,
    };
  }



onUnload() {
    console.log("reloads")
this.context.router.push('/getanswer');
}

onbeforeunload(){
  console.log("reloadsssss")
this.context.router.push('/getanswer');
}

I have tried above way but not working any suggestions.

@NabeelAyub pass a state prop on redirection and set it to null on particular page. You can check for it in this particular component — elvis_ferns, Mar 03 '20 at 08:36
https://stackoverflow.com/questions/50026028/react-how-to-detect-page-refresh-f5 — Alex, Mar 03 '20 at 09:26

score 0 · Answer 1 · answered Mar 03 '20 at 08:33

0

componentDidUpdate() {
  this.context.router.push('/getanswer');
}

whenever page loads componentDidUpdate method will get invoke and it will redirect into previous page.

answered Mar 03 '20 at 08:33

Sajish

1
1

this will reroute even when redirected @Sajish – elvis_ferns Mar 03 '20 at 08:34
This method won't trigger when user reloads a page. (from documentation - "This method is not called for the initial render.") – faithfull Mar 03 '20 at 08:36

Rafael Barbosa · Answer 2 · 2020-03-03T11:22:46.017

0

ReactJs don't have any method to listen reload events. Use this plain Javascript event handler:

window.onbeforeunload = (e) => {
  this.context.router.push('/getanswer');
};

Usa can also put this (on constructor):

constructor(props) {
  if (window.performance) {
    if (window.performance.navigation.type == 1) {
      //This page is reloaded
      this.context.router.push('/getanswer');
    }
  }
}

edited Mar 03 '20 at 11:22

answered Mar 03 '20 at 11:17

Rafael Barbosa

195
13

How to redirect to another page when the current page is refreshed Reactjs

2 Answers2