React ブラウザの戻るボタンを検知したい

前提

React-Routerでページ遷移を実装している

実現したいこと

戻るボタンで前のページに戻った時に検知してイベント発火→ページを再読み込みしたい

発生している問題・エラーメッセージ

addEventListenerを使った方法は見つけたがレンダリングが多くなってしまう
せっかくReactを使用しているのでReact-Routerを使用した方法はないのか

該当のソースコード

  window.addEventListener('popstate',e=>{
 　　console.log('レンダリング')
       window.location.reload();
    })
});

試したこと

addEventListenerを使用した方法しか記事がなかった

hoshi-takanori

2022/06/13 13:27

React でページ再読み込みは悪手ですね。react router で普通に画面遷移を実装すれば、戻るボタンに限らず表示内容が更新される (ように作る) と思いますけど…。

行動規範の内容に同意します

回答1件

参考になりそうなコードをみつけたので回答します。
まだ不安定(UNSAFE)とされているAPIを使う点が若干気になりますが、stackoverflowのこの質問

How to controling browser back button with react router dom v6?

に対するこの回答👉 https://stackoverflow.com/a/71399121
をちょっと試してみました。

teratail の別の質問への私の回答の中の追記に書いたコンポーネントを流用しつつ、App.js に以下のコードを追加します。

diff
1 import './App.css';
2-import { BrowserRouter, Routes, Route } from 'react-router-dom';
3+import { useContext, useEffect } from 'react';
4+import { BrowserRouter, Routes, Route, UNSAFE_NavigationContext } from 'react-router-dom';
5 import {
6   About,
7   Footer,
8   Header,
9   Home,
10   Service
11 } from './components';
12 
13+const useBackListener = (callback) => {
14+  const navigator = useContext(UNSAFE_NavigationContext).navigator;
15+
16+  useEffect(() => {
17+    const listener = ({ location, action }) => {
18+      console.log("listener", { location, action });
19+      if (action === "POP") {
20+        callback({ location, action });
21+      }
22+    };
23+    const unlisten = navigator.listen(listener);
24+    return unlisten;
25+  }, [callback, navigator]);
26+};
27+
28+const HeaderWithListener = () => {
29+  useBackListener(({ location, action }) => {
30+    console.log(location, action);
31+  });
32+
33+  return <Header />;
34+}
35+
36 const App = () => {
37   return (
38     <div className="App">
39       <BrowserRouter>
40-        <Header />
41+        <HeaderWithListener />
42         <Routes>
43           <Route path={"/"} element={<Home/>} />
44           <Route path={"/about"} element={<About/>} />