CODEWITHSUNDEEP
javascriptreactjsnext.js
funkybuddha
funkybuddha

Reputation: 53

Router.push or Link not rendering/refreshing the page even thought the url is updated nextjs

I apologize for my horrendous way of explaining my issue. I have shared a link below description which is exactly the same issue I am experiencing. Any kind of help would be greatly appreciated.

I have directory path like pages/request/[reqid].js . When my url is localhost:3000/xyz and I navigate to pages/request/1 by clicking a button on the current page, the page successfully loads the page with proper data from [reqid=1] but when I try to access pages/request/[reqid].js with different reqid (say suppose reqid=2), the url reflects the correct the reqid pages/request/2 but the page remains the same, doesn't change. However if I go back to other pages like localhost:3000/xyz and click a button there to navigate to pages/request/2 it works but from within pages/request/[reqid] it doesn't render a page associated to the corresponding reqid even thought the url is updated. I have tried both Link and router.push ,both fails to render the correct reqid page.

https://github.com/vercel/next.js/issues/26270

Upvotes: 0

Views: 3981

Answers (1)

funkybuddha
funkybuddha

Reputation: 53

It actually failed to include that I was using getServerProps to fetch the data, which was the reason the page wasn't rendering , unless the page was manually refreshed. The page state is not reset for navigation between dynamic routes that served by the same source component.

for example, give page source /a/[param]/index.js, when navigating from /test/123 to /test/124, states on the page wasn't being reset.

So actually happened is the same React Component been rendered with different props. Thus react takes it as a component is rerendering itself, and causing the new navigated page receive stale states.

To fix it, just add {key: } to page initial props or getserversideprops

export const getServerSideProps = async (ctx) => {
  try {
    
    const { reqid } = ctx.params;
   
     //fetch code

    return {
      props: {
        key: reqid,
        data:data
      },
    };
  } catch (error) {
    console.log(error);
  }
};

Upvotes: 3

Related Questions