ブラウザバックしても今いるページに留まらせて欲しいと言われて三千里 using React router
おすし上記サイトに下記のように書けばええとのことで書いてたんです
history.pushState(null, null, location.href);
window.addEventListener('popstate', (e) => {
history.go(1);
});
まぁ動くんですこれで
でも何やってっかわかんねぇ
てなって
おすしpushStateとは
このサイトによると
// pushStateの場合
pushState(null, null, 'localhost:3000/company.html')
// 履歴の中身 ['localhost:3000/home.html', 'localhost:3000/company.html']
// 戻るボタンを押すとlocalhost:3000/home.htmlに戻る
// replaceStateの場合
replaceState(null, null, 'localhost:3000/company.html')
// 履歴の中身 ['localhost:3000/company.html']
// 戻るボタンを押すとlocalhost:3000/company.htmlよりも前にいたページに戻る
と言うことなので
history.pushState(null, null, location.href);
一番上で書いてたこれって、historyに今のURLの配列にpushしてるってことだった
おすしwindow.addEventListener('popstate',とは
window.addEventListener('popstate', (e) => {
history.go(1);
});
addEventListener() メソッドは、特定のイベントが対象に配信されるたびに呼び出される関数を設定します。
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener
そしてpopstateはブラウザバックした時ってことらしい
history.go(1)
(1)は
履歴の中を移動したい先の位置で、現在のページからの相対位置です
https://developer.mozilla.org/ja/docs/Web/API/History/go
なので、今いるページから１ページ先に進むと言うこと
おすしなのでまた一番上のこのコード
history.pushState(null, null, location.href);
window.addEventListener('popstate', (e) => {
history.go(1);
});
は、
最初に今いるページのURLを履歴の配列に入れて
ブラウザバックされたらまた今のURLに戻るということになる
おすししかし弊環境はReactでHooksを利用させていただいているので
useEffect(() => {
history.pushState(null, null, location.href);
},[])
こんだけでいけた(； ・`ω・´)
マウント時にurl追加してるので戻っても今のurlエンドレス今のurl永遠に今のurl
おすしちなみに
const browserBackBlockFunc = () => {
history.go(1)
}
useEffect(() => {
window.history.pushState(null, "", location.href);
window.addEventListener('popstate', browserBackBlockFunc);
//クリーンアップ
return () => {
window.removeEventListener('popstate', browserBackBlockFunc)
}
と言うふうにも書けるけど、Reactで書くとき
アンマウント時のaddEventListenerのクリーンアップをしないと
「メモリリークしとんで！！」と言うエラーとともにホワイトアウトしてしまうので
クリーンアップは必須なようです。
また、safariでは上記useEffect部分の実装もないと動きませんでした。
(chromeではなくても動く)
ご意見あればリプお願い致します。