Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

router.replace() on pages with query params cause entire page re-render on Next 14.2.3 #66427

Open
sergiofra98 opened this issue May 31, 2024 · 1 comment
Labels
bug Issue was opened via the bug report template. linear: next Confirmed issue that is tracked by the Next.js team. Navigation Related to Next.js linking (e.g., <Link>) and navigation.

Comments

@sergiofra98
Copy link

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/delicate-shadow-nwztm4

To Reproduce

Using the code sanbox provided above:

  • Scroll to the bottom of the page in the increase page button
    
  • Click on it. see the url query changes to reflect the new page
    
  • the page will go back to the top.
    

Current vs. Expected behavior

Expected Behavior

When updating the pagination query parameter (p), the page (with url slug) content should dynamically update without triggering a full page reload, as it correctly does on the main page (/).

Actual Behavior

The entire page reloads on routes other than the main page (without url slug) whenever the pagination query parameter (p) is updated, resetting the scroll position to the top.

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP Thu Jan 11 04:09:03 UTC 2024
  Available memory (MB): 32102
  Available CPU cores: 12
Binaries:
  Node: 18.20.3
  npm: 10.7.0
  Yarn: N/A
  pnpm: 8.6.7
Relevant Packages:
  next: 14.2.3 // Latest available version is detected (14.2.3).
  eslint-config-next: 13.5.3
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Navigation

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), Vercel (Deployed)

Additional context

This happens when upgrading many dependencies, the error is gone when using window.location.replace(), but it leaves my navigation stack in a funky state, meaning that i have to go back for every page that is changed in the url.

Experimental scroll restoration is enabled (disabled gives me the same results)

@sergiofra98 sergiofra98 added the bug Issue was opened via the bug report template. label May 31, 2024
@github-actions github-actions bot added the Navigation Related to Next.js linking (e.g., <Link>) and navigation. label May 31, 2024
@NikolaR01
Copy link

Hey, having some issues with this myself but the codesandbox you attached has a couple issues.

In the page you are importing next/navigation useRouter and the NextRouter type used in the handler is imported from next/router.

These are 2 completely different things - both having a replace method with the first argument being a url is why you did not notice it breaking.

next/navigation useRouter interface can be found here
next/router useRouter interface can be found here

As you can see, next/navigation does not provide a shallow prop.

@github-actions github-actions bot added the linear: next Confirmed issue that is tracked by the Next.js team. label Aug 12, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Issue was opened via the bug report template. linear: next Confirmed issue that is tracked by the Next.js team. Navigation Related to Next.js linking (e.g., <Link>) and navigation.
Projects
None yet
Development

No branches or pull requests

2 participants