CODEWITHSUNDEEP
javascriptreactjsreact-router
vesperae
vesperae

Reputation: 1291

React Router, lifecycle when browser's back button is clicked

I want to detect when the user has hit the back button. Essentially, when a user goes from the /projects to /projects/foo the nav style changes.

<Route path="/projects" component={(props, state, params) => 
        <Projects {...props} />
</Route>

This works fine when detecting an onClick event from /projects to a specific project, but when the user hits the back button componentDidMount is not called... I'm trying to use this.props.location.pathname to determine the specific path, but as I need to set state I cannot do this inside render.

Is there a "react" way of going about this? Thx

Upvotes: 4

Views: 6653

Answers (1)

gabrielwr
gabrielwr

Reputation: 198

As you noted, componentDidMount will only be called once when the component is mounted. Instead, use the lifecycle hook componentWillReceiveProps. Here is the documentation.

You can use this to conditionally setState if you're at the desired/correct path. This will update the state which will then re-render the component.

UPDATE:

Since posting this answer componentWillReceiveProps has been deprecated. You'll need to use shouldComponentUpdate or getDerivedStateFromProps depending on your use case. More info on that here.

Upvotes: 4

Related Questions