首頁(yè) 猿問(wèn) 想要為瀏覽器的后退按鈕設(shè)置一個(gè)事件...

想要為瀏覽器的后退按鈕設(shè)置一個(gè)事件處理程序，下一步.js

JavaScript

慕工程0101907 2022-08-27 15:11:24

我有一個(gè)模式，在打開(kāi)時(shí)將哈希推送到url，在瀏覽器后退按鈕單擊時(shí)，我想識(shí)別該事件，以便我可以切換模式狀態(tài)。關(guān)鍵是，由于我將其與next.js（服務(wù)器端渲染）一起使用，我將無(wú)法訪問(wèn)窗口對(duì)象（如果我錯(cuò)了，請(qǐng)糾正我）。所以我需要另一種方法來(lái)處理瀏覽器后退按鈕的事件。example.com/#modal

查看完整描述

2 回答

吃雞游戲

TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超7個(gè)贊

要為您的案例添加一個(gè)實(shí)用示例來(lái)補(bǔ)充Artinium的答案，您可以使用的 beforePopState 對(duì)會(huì)話歷史記錄導(dǎo)航的更改（后退/前進(jìn)操作）采取行動(dòng)，并確保它僅在離開(kāi)當(dāng)前頁(yè)面時(shí)發(fā)生。next/router

useEffect(() => {

router.beforePopState(({ as }) => {

if (as !== router.asPath) {

// Will run when leaving the current page; on back/forward actions

// Add your logic here, like toggling the modal state

}

return true;

});

return () => {

router.beforePopState(() => true);

};

}, [router]); // Add any state variables to dependencies array if needed.

反對(duì) 回復(fù) 2022-08-27

動(dòng)漫人物

TA貢獻(xiàn)1815條經(jīng)驗(yàn) 獲得超10個(gè)贊

@Summy 我希望您的問(wèn)題現(xiàn)在得到解決。如果沒(méi)有，你可以試試瀏覽器后退按鈕：- 下一步.js + React 返回上一頁(yè) 如果你想使用hashbang URL，你不能使用SSR，因?yàn)?#和/#/one是相同的路由服務(wù)器端，所以服務(wù)器沒(méi)有辦法知道要渲染什么，它需要發(fā)送一個(gè)基本的模板，讓客戶端填寫(xiě)它，在這種情況下，我認(rèn)為將CRA或Parcel與React Router及其HashRouter一起使用是一個(gè)更好的選擇，這樣你就可以擁有一個(gè)索引.html并讓客戶端決定渲染什么。

反對(duì) 回復(fù) 2022-08-27