2

I have a NextJS application with a page to display some information from my API. I currently have a useEfect hook with an empty dependency list that calls the API. The problem is that if a user then goes to another page and changes their information, when they navigate back to the first page the useEffect hook doesn't run again and the user is shown outdated information.

I know that this is somehow related to the fact that NextJS doesn't refresh page states with navigation, but I'm unsure how to get around it. I've tried using the NextJS useRouter hook and adding router.query.slug to the useEffect dependency list but that doesn't seem to do anything.

Any help is appreciated, thanks!

  useEffect(() => {
    loadInformation();
  }, []);

This doesn't fire when I navigate back to the page but I would like it to.

Matt Wise
  • 33
  • 1
  • 3
  • Sorry, may I know how these 2 pages are related? Are they parent and children or completely different 2 separate pages? Moreover, can you please add the screenshot of the folder structure for more information? – Helper Dec 31 '22 at 18:11
  • @Helper they're completely different pages both in the NextJS pages directory – Matt Wise Dec 31 '22 at 18:34
  • Can you please provide the code for both the files if possible? That will be very helpful for me to visualize what might be going wrong. – Helper Dec 31 '22 at 18:36
  • And by the way, how are you going back to the page? Just by pressing the browser back button? – Helper Dec 31 '22 at 18:38
  • Also I hope that you've used `react-router-dom` elements/components only. – Helper Dec 31 '22 at 18:39
  • @Helper, NextJS doesn't use react-router – moy2010 Jan 01 '23 at 13:35
  • @MattWise, this other question might be what you're looking for: https://stackoverflow.com/questions/61932918/want-to-have-an-event-handler-for-the-browsers-back-button-with-next-js – moy2010 Jan 01 '23 at 13:36

1 Answers1

0

How do you navigate back to that page? If it's through a button click maybe you could try using router.push instead of NextJS Link Component or Adding router.asPath as a dependency instead of router.query.slug

mldcmldc
  • 1
  • 1
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 02 '23 at 11:49