Nextjs pages router doesn't update UI when using history replace

[lid0a]

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/prod-firefly-j4mlsw

To Reproduce

1. Run the application in either dev or prod mode

2. Open the sandbox window in a new tab

3. Click on any link in the list

4. Click on any link in the sidebar

Current vs. Expected behavior

I'm trying to implement infinite scrolling feed with url sync, i.e. while scrolling url should be /recipes/<ACTIVE_ITEM_ID>, where <ACTIVE_ITEM_ID> - id of the item, which is in the center of the browser's viewport. I'm implementing this using intersection observer, window scroll event and location history. My infinte scrolling logic works as expected, but when I want to navigate to another page, UI isn't updated although url is updated. Screencast from 05-10-2024 05_49_23 PM.webm

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
  Available memory (MB): 4102
  Available CPU cores: 2
Binaries:
  Node: 20.9.0
  npm: 9.8.1
  Yarn: 1.22.19
  pnpm: 8.10.2
Relevant Packages:
  next: 14.3.0-canary.54 // Latest available version is detected (14.3.0-canary.54).
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.1.3
Next.js Config:
  output: N/A

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

Navigation, Pages Router

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

next dev (local), next start (local)

Additional context

By the way, the same code for app router works correctly https://codesandbox.io/p/devbox/recipes-app-router-vzf6mw

[icyJoseph]

Update your links to other recipes, with shallow false, as follows:

              <Link href={`/recipes/${recipe.idMeal}`} shallow={false}>
                {recipe.strMeal}
              </Link>

And then add this useEffect, here src/pages/recipes/[id].tsx:

  useEffect(() => {
    setRecipes([recipe]);
  }, [recipe]);

This is to resync with the new head recipe sent from GSSP.

[lid0a]

Update your links to other recipes, with shallow false, as follows:

              <Link href={`/recipes/${recipe.idMeal}`} shallow={false}>
                {recipe.strMeal}
              </Link>

And then add this useEffect, here src/pages/recipes/[id].tsx:

  useEffect(() => {
    setRecipes([recipe]);
  }, [recipe]);

This is to resync with the new head recipe sent from GSSP.

Thanks! Now it works. And useEffect is enough as the shallow prop is false by default

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.