Re-render same component on url change in react

javascript reactjs redux react-router react-props
Ayan Banerjee picture Ayan Banerjee · Sep 10, 2018 · Viewed 9.2k times · Source

I have a route which takes an id and renders the same component for every id, for example : <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?

Answer

Saša Đurić picture Saša Đurić · Mar 27, 2020

Putting current location as key on component solves problem.

<Route path='/:code' component={(props) => <Card {...props} key={window.location.pathname}/>}/>

Related questions

How to sync Redux state and url hash tag params

We have a list of lectures and chapters where the user can select and deselect them. The two lists are stored in a redux store. Now we want to keep a representation of selected lecture slugs and chapter slugs in …

Read More
How to set activeClassName for wrapper element of Link or IndexLink in react-router?

I am new to the ReactJS world, and would like to know how can I pass active class name to the <li> element instead of <a>(Link) element. Now I have this kind of code. The …

Read More
Transition to another route on successful async redux action

I have a pretty simple set of react components: container that hooks into redux and handles the actions, store subscriptions, etc list which displays a list of my items new which is a form to add a new item to …

Read More