0

I have different URLS that are not rendering results.

The behavior is:

1)I have a dynamic list of links, one link for each item created in the database which has a unique ID. When I click on one of these links for the first time, and am coming from a different website page, the web page works as expected and I view the correct item.

So I come from: http://localhost:8000/#/people

And then I go to: http://localhost:8000/#/contract/view/7cf403ff-820a-449e-81cc-ed4241a44c6a

This is ok, and this works as expected.

2)I now click on another item to view its details. The URL is similar, but has a different ID.

New URL: http://localhost:8000/#/contract/view/188bcabc-7a6e-432e-a638-4446884e5086

When I click on this link the page does NOT re-render the new contents. However, I can see the new URL in the browser. Also, if I refresh the browser with this new URL I will then see the new contents. It's as though React thinks this new link is the same as the last.

I am using the 'Link' tag. I've been trying to find a solution for many hours or even simply information on why this would happen. All other pages render fine, it's just when I click on these particular set of links directly after the other with no page hits in between.

Any help would be appreciated.

ChrisK
  • 127
  • 1
  • 8
  • If you are on the same path then component is already rendered in the page, so componentDidMount will not execute, in your component add componentDidUpdate which will run whenever route changes. – Gulam Hussain Jun 29 '21 at 16:24

1 Answers1

0

Are you fetching some value depending on the new ID from useEffect() hook?

Otherwise the page/component is same for all IDs. You need to fetch the data in useEffect() and update the state using setState(). Only by updating a state, your component will re-render.

Please provide some example of your code to make the issue clear to understand.

A D
  • 466
  • 2
  • 8