第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

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

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

函數(shù)式編程 2023-10-20 10:28:40
我一直在開發(fā)一個基于 ReactJS 的網(wǎng)站,所以我使用 NavLinks 重定向到其他組件,它正在工作,但問題是它把我?guī)У搅私M件的最后,就像我有一個聯(lián)系頁面并且我正在使用并且<NavLink to="/contact"> Contact Us </NavLink>我已設(shè)置一條路線,該路線將為/contact 呈現(xiàn)聯(lián)系人組件 當(dāng)我單擊此鏈接時,它將帶我到該組件,但它會顯示頁面的末尾,比如說,如果我在該聯(lián)系人組件上有三個部分,那么當(dāng)我單擊NavLink 它將帶我到最后一部分的最后一部分,但我希望它顯示頁面頂部該組件第一部分的頂部。我怎樣才能做到這一點?請幫助我在其他地方找不到這個問題的答案。另外我想補充一點,我在導(dǎo)航欄中使用的 NavLink 工作得很好,但所有其他人都遇到了我剛才提到的問題,而且所有這些都完全相同,我無法弄清楚問題。
查看完整描述

1 回答

?
慕的地8271018

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]);


查看完整回答
反對 回復(fù) 2023-10-20
  • 1 回答
  • 0 關(guān)注
  • 116 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號