1 回答

TA貢獻1796條經(jīng)驗 獲得超4個贊
我假設(shè)您NavLink參考的是React Router 的NavLink.
本質(zhì)上,您的 React 應(yīng)用程序并不是在加載新的 Web 文檔(HTTP 請求)的意義上進行導(dǎo)航。相反,您將替換現(xiàn)有頁面的部分內(nèi)容。這意味著會保留很多狀態(tài)(包括問題中的滾動位置)。
因此,您每次“導(dǎo)航”時都需要“滾動到頂部”。這可以通過將以下掛鉤添加到您的聯(lián)系頁面組件來完成:
// Scroll to the top of this page when mounted
useEffect(() => {
window.scrollTo(0, 0);
}, []);
注意:使用<Route path='/contact' render={() => <ContactPage />} />不會導(dǎo)致組件重新安裝,并且需要其他解決方案。
要在應(yīng)用程序中全局“導(dǎo)航”時實現(xiàn)此“滾動頂部”,請考慮使用以下鉤子在位置更改時“滾動頂部”:
const location = useLocation(); // import { useLocation } from 'react-router-dom';
useEffect(() => {
// Scroll top when location changes
window.scrollTo(0, 0);
}, [location]);
添加回答
舉報