国产一区二区精品-国产一区二区精品久-国产一区二区精品久久-国产一区二区精品久久91-免费毛片播放-免费毛片基地

千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機(jī)構(gòu)

手機(jī)站
千鋒教育

千鋒學(xué)習(xí)站 | 隨時隨地免費(fèi)學(xué)

千鋒教育

掃一掃進(jìn)入千鋒手機(jī)站

領(lǐng)取全套視頻
千鋒教育

關(guān)注千鋒學(xué)習(xí)站小程序
隨時隨地免費(fèi)學(xué)習(xí)課程

當(dāng)前位置:首頁  >  技術(shù)干貨  > 如何用router返回上一頁

如何用router返回上一頁

來源:千鋒教育
發(fā)布人:xqq
時間: 2023-11-23 04:08:00 1700683680

在Web開發(fā)中,我們時常需要跳轉(zhuǎn)到不同的頁面和URL。然而,當(dāng)我們需要在頁面間切換時,如何實(shí)現(xiàn)返回上一頁的功能呢?在本文中,我們將從多個方面探討如何用router實(shí)現(xiàn)返回上一頁的功能。

一、window.history方法

window.history對象提供了對瀏覽器歷史記錄的訪問。通過它,我們可以實(shí)現(xiàn)返回上一頁的功能。


window.history.back();

上述代碼可以使用戶返回到瀏覽歷史記錄中的前一個頁面。在實(shí)際使用中,我們可以將其與router結(jié)合使用,如下所示:


import { useHistory } from 'react-router-dom';

function goBack() {
  const history = useHistory();
  history.goBack();
}

二、通過路由參數(shù)

我們也可以通過在URL上添加參數(shù),來實(shí)現(xiàn)返回上一頁的功能。比如,我們可以將之前的頁面的URL作為參數(shù)傳遞給當(dāng)前頁面。在返回時,我們再將當(dāng)前頁面的URL作為參數(shù)傳遞回之前的頁面。


import { Link } from 'react-router-dom';

// 前一個頁面
/somePage?from=${location.pathname}}>Go to some page

// 當(dāng)前頁面
import { useLocation, useHistory } from 'react-router-dom';

function goBack() {
  const location = useLocation();
  const history = useHistory();
  const from = new URLSearchParams(location.search).get('from');
  history.push(from);
}

三、通過瀏覽器的后退按鈕

當(dāng)用戶在網(wǎng)站中點(diǎn)擊后退按鈕時,瀏覽器會自動調(diào)用window.history.back()方法。因此,我們可以不用手動實(shí)現(xiàn)返回上一頁的功能,而是依靠瀏覽器自帶的后退按鈕來實(shí)現(xiàn)。

但需要注意的是,如果用戶在當(dāng)前頁面使用了一些頁面內(nèi)跳轉(zhuǎn)的方法(例如錨鏈接),那么瀏覽器的后退按鈕會將用戶帶回到之前的錨點(diǎn)位置,而不是之前的頁面。因此,需要在設(shè)計頁面時,合理使用錨鏈接來避免這種情況的發(fā)生。

四、通過編程方式模擬后退按鈕

如果我們需要在代碼中模擬后退按鈕的功能,可以借助window.history模擬后退按鈕的行為。


window.history.go(-1);

在上述代碼中,-1表示向后回退一個頁面,1表示向前前進(jìn)一個頁面。同樣,我們可以將其與router結(jié)合使用,如下所示:


import { useHistory } from 'react-router-dom';

function goBack() {
  const history = useHistory();
  history.go(-1);
}

我們可以根據(jù)實(shí)際需要選擇合適的方法實(shí)現(xiàn)返回上一頁的功能。在實(shí)際應(yīng)用中,需要遵循Web開發(fā)的規(guī)范和標(biāo)準(zhǔn),確保代碼的健壯性和可靠性。

聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
10年以上業(yè)內(nèi)強(qiáng)師集結(jié),手把手帶你蛻變精英
請您保持通訊暢通,專屬學(xué)習(xí)老師24小時內(nèi)將與您1V1溝通
免費(fèi)領(lǐng)取
今日已有369人領(lǐng)取成功
劉同學(xué) 138****2860 剛剛成功領(lǐng)取
王同學(xué) 131****2015 剛剛成功領(lǐng)取
張同學(xué) 133****4652 剛剛成功領(lǐng)取
李同學(xué) 135****8607 剛剛成功領(lǐng)取
楊同學(xué) 132****5667 剛剛成功領(lǐng)取
岳同學(xué) 134****6652 剛剛成功領(lǐng)取
梁同學(xué) 157****2950 剛剛成功領(lǐng)取
劉同學(xué) 189****1015 剛剛成功領(lǐng)取
張同學(xué) 155****4678 剛剛成功領(lǐng)取
鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
董同學(xué) 138****2867 剛剛成功領(lǐng)取
周同學(xué) 136****3602 剛剛成功領(lǐng)取
相關(guān)推薦HOT