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
- navigate to Page 2 from Page 1 by clicking the "Page 2" link
- Page 2 calls
useCanGoBack and because of the browser history, it returns true as expected
Hello "/(test)/page2 can go back"! is displayed
- 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
Which project does this relate to?
Router
Describe the bug
the
useCanGoBackhook 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
useCanGoBackand because of the browser history, it returns true as expectedHello "/(test)/page2 can go back"! is displayed
canGoBack = false(empty history), but the client hydrates withtrue(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
useEffectruns but this seems a little hacky.If this is a known limitation, I'm curious how to perhaps safeguard the flash of
falseui as well as avoiding the errorthanks!!
Screenshots or Videos
No response
Platform
Additional context
No response