Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Can't use another property in history.state #54557

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.

Sign up for GitHub

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

Jump to bottom
Open
1 task done
khsiea opened this issue Aug 25, 2023 · 2 comments
Open
1 task done

Can't use another property in history.state #54557

khsiea opened this issue Aug 25, 2023 · 2 comments
Labels
bug Issue was opened via the bug report template. stale The issue has not seen recent activity.

Comments

@khsiea
Copy link

khsiea commented Aug 25, 2023

Verify canary release

  • I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.5.0: Mon Apr 24 20:52:24 PDT 2023; root:xnu-8796.121.2~5/RELEASE_ARM64_T6000
    Binaries:
      Node: 20.5.0
      npm: 9.8.0
      Yarn: 1.22.19
      pnpm: 8.6.12
    Relevant Packages:
      next: 13.4.13
      eslint-config-next: 11.0.1
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.6
    Next.js Config:
      output: N/A

Which area(s) of Next.js are affected? (leave empty if unsure)

App Router

Link to the code that reproduces this issue or a replay of the bug

https://github.com/khsiea/reproduction-app

To Reproduce

After clicking the Next.js page button and returning, the previously set history state becomes undefined.

Describe the Bug

The history state that was stored in previous page become undefined when navigating backward. The reason is HistoryUpdater component. The component overwrite the history state.

next.js/packages/next/src/client/components/app-router.tsx

Lines 110 to 132 in 4d6febf

function HistoryUpdater({ tree, pushRef, canonicalUrl, sync }: any) {
useInsertionEffect(() => {
// Identifier is shortened intentionally.
// __NA is used to identify if the history entry can be handled by the app-router.
// __N is used to identify if the history entry can be handled by the old router.
const historyState = {
__NA: true,
tree,
}
if (
pushRef.pendingPush &&
createHrefFromUrl(new URL(window.location.href)) !== canonicalUrl
) {
// This intentionally mutates React state, pushRef is overwritten to ensure additional push/replace calls do not trigger an additional history entry.
pushRef.pendingPush = false
window.history.pushState(historyState, '', canonicalUrl)
} else {
window.history.replaceState(historyState, '', canonicalUrl)
}
sync()
}, [tree, pushRef, canonicalUrl, sync])
return null
}

Expected Behavior

I want to use another history state value.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response
@khsiea khsiea added the bug Issue was opened via the bug report template. label Aug 25, 2023
@hamsterhomka
Copy link

Actual problem

@nextjs-bot
Copy link
Collaborator

This issue has been automatically marked as stale due to two years of inactivity. It will be closed in 7 days unless there’s further input. If you believe this issue is still relevant, please leave a comment or provide updated details. Thank you.

@nextjs-bot nextjs-bot added the stale The issue has not seen recent activity. label May 2, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Issue was opened via the bug report template. stale The issue has not seen recent activity.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@hamsterhomka @khsiea @nextjs-bot