How can I detect refresh page and routes change in react?

Question

I have to call an specific function (componentsHandler) every time that the route changes or the page is refreshed.

This function is responsible to deal with some components states

componentsHandler(menuItem, event) {
    switch (menuItem) {
      case '/':
        this.headerTitleHandler('Search')
        this.searchBarHandler(true)
        break
      case '/dashboard':
        this.headerTitleHandler('Dashboard')
        break
      case '/administration':
        this.headerTitleHandler('Admin')
        this.searchBarHandler(false)
        this.searchBarInfoHandler(false)
        break
      default:          
    }
  }

So, when the route changes I call componentsHandler function using componentDidUpdate:

  componentDidUpdate(prevProps) {
    if (this.props.location !== prevProps.location) {
      this.componentsHandler(this.props.location.pathname)
    }
  }

The problem is that when I refresh the page, componentDidUpdate doesn't detect it and the componentsHandler function is not called.

How can I deal with it?

does it work when you click manually ?

Nikhil Patil
– Nikhil Patil

2019-06-28 12:32:17 +00:00
Commented Jun 28, 2019 at 12:32 — Nikhil Patil
– Nikhil Patil, Commented Jun 28, 2019 at 12:32
@NikhilPatil yes. It doesnt works if I refresh the page

mr.abdo
– mr.abdo

2019-06-28 12:33:29 +00:00
Commented Jun 28, 2019 at 12:33 — mr.abdo
– mr.abdo, Commented Jun 28, 2019 at 12:33
are you using used react-router ? for routing

Nikhil Patil
– Nikhil Patil

2019-06-28 12:36:10 +00:00
Commented Jun 28, 2019 at 12:36 — Nikhil Patil
– Nikhil Patil, Commented Jun 28, 2019 at 12:36
yep..sorry for didnt write it

mr.abdo
– mr.abdo

2019-06-28 12:37:51 +00:00
Commented Jun 28, 2019 at 12:37 — mr.abdo
– mr.abdo, Commented Jun 28, 2019 at 12:37

Diamond · Accepted Answer · 2019-06-28 12:33:14Z

2

You can call componentsHandler function in componentDidMount.

  componentDidMount() {
     this.componentsHandler(this.props.location.pathname);
  }

answered Jun 28, 2019 at 12:33

Diamond

3,4905 gold badges21 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Nikhil Patil Over a year ago

componentDidMount() called only once ! I think it won't work.

Diamond Over a year ago

@NikhilPatil When we refresh or route is changed by users, the component is destroyed and created again when you visit again. That means componentDidMount should be called every time when you visit by route or refresh.

Nikhil Patil Over a year ago

yes you are right whenever component is rendered componenetDidMount() get's called. My Bad!

cubefox · Accepted Answer · 2019-06-28 12:40:25Z

0

On refresh your app is rendered from scratch. You need a handler for componentDidMount and componentDidUpdate (or just useEffect if you use hooks)

  componentDidMount() {
      this.componentsHandler(this.props.location.pathname)
  }


  componentDidUpdate(prevProps) {
    if (this.props.location !== prevProps.location) {
      this.componentsHandler(this.props.location.pathname)
    }
  }

answered Jun 28, 2019 at 12:40

cubefox

1,32117 silver badges39 bronze badges

Collectives™ on Stack Overflow

How can I detect refresh page and routes change in react?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related