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

Question

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

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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.

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

Sign up