React-Router to load a page, even if we're already on that page

Question

I use react router in my website. I have homepage and contact.

When I am on homepage and I click on the homepage again. How can I reload the page like Facebook

issue here: https://github.com/ReactTraining/react-router/issues/1982

If you are on the home page (facebook) and you click on the home navigation. It still reloads the page — coinhndp, Sep 24 '18 at 11:21

score 0 · Answer 1 · answered Sep 24 '18 at 11:21

0

After looking at the issue, I can realize that you may use force update:

componentDidUpdate(prevProps) {
    if (this.props.location !== prevProps.location) {
      this.forceUpdate();
    }
  }

answered Sep 24 '18 at 11:21

Bhojendra Rauniyar

83,432
35
168
231

this.props.location !== prevProps.location is always trueee – coinhndp Sep 24 '18 at 11:29
And it was called serveral time after componentDidMount – coinhndp Sep 24 '18 at 11:31
Only detect specific change what you need and then update. I have given you just an example. – Bhojendra Rauniyar Sep 24 '18 at 11:40

score 0 · Answer 2 · answered Sep 24 '18 at 11:26

0

You could set up an event handler on the 'home' Link, that will fetch the data you want to be updated.

      class Nav extends React.Component {
  constructor () {
    super()
    this.handleClick = this.handleClick.bind(this)
  }
  handleClick () {
    // code that fetches Home Page data
  }
  render () {
    return (
      <Link to='your/path' onClick={this.handleClick}>Home</Link>
    )
  }
}

answered Sep 24 '18 at 11:26

adam.k

622
3
15

Nav and Home is two different components so it does not work like that – coinhndp Sep 24 '18 at 11:28
What kind of information are you trying to update on your home page and where is it stored? – adam.k Sep 24 '18 at 11:38
I use redux and action. It is a little bit weird if we put that login in Nav – coinhndp Sep 24 '18 at 12:07
If your simply trying to dispatch an action to revert or update your home component. Give my suggestion a try, it should work. If not maybe have a look here https://stackoverflow.com/questions/38839510/forcing-a-react-router-link-to-load-a-page-even-if-were-already-on-that-page?rq=1 – adam.k Sep 24 '18 at 12:27

score 0 · Answer 3 · answered Dec 18 '18 at 16:15

This might be a common problem and I was looking for a decent solution to have in my toolbet for next time. React-Router provides some mechanisms to know when an user tries to visit any page even the one they are already.

Reading the location.key hash, it's the perfect approach as it changes every-time the user try to navigate between any page.

componentDidUpdate (prevProps) {
    if (prevProps.location.key !== this.props.location.key) {
        this.setState({
            isFormSubmitted: false,
        })
    }
}

Reference: A location object is never mutated so you can use it in the lifecycle hooks to determine when navigation happens

React-Router to load a page, even if we're already on that page

3 Answers3