Files

TerryM 01eab88c0f feat: connect wallet favorites to backend

2026-06-04 17:06:29 +08:00

2.3 KiB

Raw Blame History

title, type, date

title	type	date
Desktop Favorites Header Blank Page — Quick Fix	quick-fix	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.

2.3 KiB Raw Blame History