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

千鋒教育-做有情懷、有良心、有品質的職業教育機構

手機站
千鋒教育

千鋒學習站 | 隨時隨地免費學

千鋒教育

掃一掃進入千鋒手機站

領取全套視頻
千鋒教育

關注千鋒學習站小程序
隨時隨地免費學習課程

當前位置:首頁  >  技術干貨  > 如何用router返回上一頁

如何用router返回上一頁

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

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

一、window.history方法

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


window.history.back();

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


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

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

二、通過路由參數

我們也可以通過在URL上添加參數,來實現返回上一頁的功能。比如,我們可以將之前的頁面的URL作為參數傳遞給當前頁面。在返回時,我們再將當前頁面的URL作為參數傳遞回之前的頁面。


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

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

// 當前頁面
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);
}

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

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

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

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

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


window.history.go(-1);

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


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

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

我們可以根據實際需要選擇合適的方法實現返回上一頁的功能。在實際應用中,需要遵循Web開發的規范和標準,確保代碼的健壯性和可靠性。

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