Skip to content

useCanGoBack causes hydration error on page refresh #8211

Description

@babycourageous

Which project does this relate to?

Router

Describe the bug

the useCanGoBack hook can throw a hydration error if a page is refreshed while there is history.

Complete minimal reproducer

https://github.com/babycourageous/tanstack-cangoback-hydration

Steps to Reproduce the Bug

there are 2 pages in the repro Start project - Page 1 and Page 2

  1. navigate to Page 2 from Page 1 by clicking the "Page 2" link
  2. Page 2 calls useCanGoBack and because of the browser history, it returns true as expected

Hello "/(test)/page2 can go back"! is displayed

  1. if you refresh the browser after navigating to Page 2, a hydration mismatch error is thrown and displayed in the console. It appears that the server renders canGoBack = false (empty history), but the client hydrates with true (history still contains Page1).

Expected behavior

I was expecting no hydration error - but maybe this is just a known limitation for using the hook.
A user in discord suggested conditionally rendering ui after a useEffect runs but this seems a little hacky.

If this is a known limitation, I'm curious how to perhaps safeguard the flash of false ui as well as avoiding the error

thanks!!

Screenshots or Videos

No response

Platform

  • Router / Start Version: "latest
  • OS: macOS
  • Browser: Brave
  • Browser Version: Brave 1.92.134 (Official Build) (x86_64)
  • Bundler: vite
  • Bundler Version: 8

Additional context

No response

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions