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" ponent={(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 ponentDidMount 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

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" ponent={(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 ponentDidMount 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

• javascript
• reactjs
• react-router

Share Improve this question Follow asked Aug 17, 2017 at 2:59 vesperaevesperae 1,30122 gold badges1919 silver badges2828 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

As you noted, ponentDidMount will only be called once when the ponent is mounted. Instead, use the lifecycle hook ponentWillReceiveProps. 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 ponent.

UPDATE:

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