40 lines
2.3 KiB
Markdown
40 lines
2.3 KiB
Markdown
|
---
|
||
|
|
title: "Desktop Favorites Header Blank Page — Quick Fix"
|
||
|
|
type: quick-fix
|
||
|
|
date: 2026-06-04
|
||
|
|
---
|
||
|
|
|
||
|
|
# Desktop Favorites Header Blank Page — Quick Fix
|
||
|
|
|
||
|
|
## Bug
|
||
|
|
|
||
|
|
Clicking the desktop header “我的收藏 / My Favorites” button could leave the page visually blank in the local browser. The provided screenshot showed DevTools Elements with an empty `<body>` and no React `#root` node after navigating to `/cn/favorites`.
|
||
|
|
|
||
|
|
## Root Cause
|
||
|
|
|
||
|
|
This was not a z-index overlay issue. The screenshot showed that React had not mounted at all because the current document had no `#root` element. In local Vite/HMR/browser state, client-side React Router navigation could land in a stale or broken document state. The favorites route itself was valid and returned the correct Vite HTML when requested directly.
|
||
|
|
|
||
|
|
There was also a possible same-page navigation edge case: clicking “我的收藏” while already on the favorites route would not necessarily trigger route scroll reset.
|
||
|
|
|
||
|
|
## Fix
|
||
|
|
|
||
|
|
The desktop header favorites button now uses React Router's `reloadDocument` so clicking it performs a full document navigation. This forces the browser/Vite dev server to return a fresh `index.html` with `<div id="root"></div>` instead of relying on a potentially stale client-side navigation state.
|
||
|
|
|
||
|
|
The route scroll reset was also made more robust by disabling browser scroll restoration and running the route scroll reset in `useLayoutEffect`, so a restored scroll position cannot leave the favorites page sitting in blank lower space before paint.
|
||
|
|
|
||
|
|
### Files Modified
|
||
|
|
|
||
|
|
- `src/layouts/PublicLayout.tsx` — added the desktop header favorites button and made it use `reloadDocument` plus top scroll reset.
|
||
|
|
- `src/components/ScrollToTop.tsx` — switched route scroll reset to `useLayoutEffect` and set `history.scrollRestoration = "manual"` while the app is mounted.
|
||
|
|
|
||
|
|
## Verification
|
||
|
|
|
||
|
|
- Ran `npx tsc --noEmit`.
|
||
|
|
- Ran `npm run format:check`.
|
||
|
|
- Used browser native to open `http://192.168.1.187:5173/cn/browse`, confirm the header “我的收藏” button is present, navigate to favorites, and inspect the resulting page.
|
||
|
|
- Verified with browser native eval that `http://192.168.1.187:5173/favorites` has `document.getElementById("root") === true`, title `My Favorites | ARK Library`, and `scrollY === 0`.
|
||
|
|
|
||
|
|
## Notes
|
||
|
|
|
||
|
|
No deploy was performed.
|