Re-render same component on url change in react

I have a route which takes an id and renders the same component for every id, for example :
<Route path='/:code' component=Card/>

<Route path='/:code' component=Card/>

Now the in the Link tag I pass in an id to the component.Now the Card component fetches additional detail based on the id passed. But the problem is it renders only for one id and is not updating if I click back and goto the next id. I searched and found out that componentsWillReceiveProps can be used but during recent versions of React it has been deprecated. So how to do this?

3 Answers
3

Do something like the following:

static getDerivedStateFromProps(nextProps, prevState)
if(nextProps.match.params.id !== prevState.match.params.id)
// Here




I just ran into a similar problem. I think you are conflating updating/rerendering and remounting. This diagram on the react lifecycle methods helped me when I was dealing with it.

If your problem is like mine you have a component like

class Card extend Component
componentDidMount()
// call fetch function which probably updates your redux store


render ()
return // JSX or child component with ...this.props used,
// some of which are taken from the store through mapStateToProps




The first time you hit a url that mounts this component everything works right and then, when you visit another route that uses the same component, nothing changes. That's because the component isn't being remounted, it's just being updated because some props changed, at least this.props.match.params is changing.

this.props.match.params

But componentDidMount() is not called when the component updates (see link above). So you will not fetch the new data and update your redux store. You should add a componentDidUpdate() function. That way you can call your fetching functions again when the props change, not just when the component is originally mounted.

componentDidMount()

componentDidUpdate()

componentDidUpdate(prevProps)
if (this.match.params.id !== prevProps.match.params.id)
// call the fetch function again




Check the react documentation out for more details.

In React Router v4 Adding a Switch tag after Router fixes the problem

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.