已解決430363個問題，去搜搜看，總會有你想問的

為什么 NavLink 將我重定向到 React 中組件的末尾部分

首頁猿問為什么 NavLink...

為什么 NavLink 將我重定向到 React 中組件的末尾部分

JavaScript

函數式編程 2023-10-20 10:28:40

我一直在開發一個基于 ReactJS 的網站，所以我使用 NavLinks 重定向到其他組件，它正在工作，但問題是它把我帶到了組件的最后，就像我有一個聯系頁面并且我正在使用并且<NavLink to="/contact"> Contact Us </NavLink>我已設置一條路線，該路線將為/contact 呈現聯系人組件當我單擊此鏈接時，它將帶我到該組件，但它會顯示頁面的末尾，比如說，如果我在該聯系人組件上有三個部分，那么當我單擊NavLink 它將帶我到最后一部分的最后一部分，但我希望它顯示頁面頂部該組件第一部分的頂部。我怎樣才能做到這一點？請幫助我在其他地方找不到這個問題的答案。另外我想補充一點，我在導航欄中使用的 NavLink 工作得很好，但所有其他人都遇到了我剛才提到的問題，而且所有這些都完全相同，我無法弄清楚問題。

查看完整描述

1 回答

慕的地8271018

TA貢獻1796條經驗獲得超4個贊

我假設您NavLink參考的是React Router 的NavLink.

本質上，您的 React 應用程序并不是在加載新的 Web 文檔（HTTP 請求）的意義上進行導航。相反，您將替換現有頁面的部分內容。這意味著會保留很多狀態（包括問題中的滾動位置）。

因此，您每次“導航”時都需要“滾動到頂部”。這可以通過將以下掛鉤添加到您的聯系頁面組件來完成：

// Scroll to the top of this page when mounted

useEffect(() => {

window.scrollTo(0, 0);

}, []);

注意：使用<Route path='/contact' render={() => <ContactPage />} />不會導致組件重新安裝，并且需要其他解決方案。

要在應用程序中全局“導航”時實現此“滾動頂部”，請考慮使用以下鉤子在位置更改時“滾動頂部”：

const location = useLocation(); // import { useLocation } from 'react-router-dom';

useEffect(() => {

// Scroll top when location changes

window.scrollTo(0, 0);

}, [location]);

反對回復 2023-10-20

1 回答
0 關注
131 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

為什么 NavLink 將我重定向到 React 中組件的末尾部分

為什么 NavLink 將我重定向到 React 中組件的末尾部分

1 回答

添加回答