♻️ App.tsx にまとめて書くように

src/App.tsx

@@ -1,22 +1,33 @@
 import emotionReset from 'emotion-reset'
-import { useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
 import { useEffect } from 'react'
 import { Global, css } from '@emotion/react'
 import './App.css'
 import Router from '/@/router/index'
 import { useAppDispatch, useAppSelector } from '/@/store/hooks'
 import { addPageEventListener } from '/@/scripts/changePageEvent'
 import bgImage from '/@/assets/bg.svg'
+import { removeBeforeUnload, setBeforeUnload } from './utils/beforeunload'
 
 const App = () => {
   const navigate = useNavigate()
   const dispatch = useAppDispatch()
+  const { pathname } = useLocation()
   useEffect(() => {
     // wsEventを監視して画面遷移する
     // HACK: navigateとdispatchを渡してる実装やばそう
     addPageEventListener(navigate, dispatch)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
+  useEffect(() => {
+    if (pathname !== '/') {
+      setBeforeUnload()
+      return () => {
+        removeBeforeUnload()
+      }
+    }
+  }, [pathname])
+
   const bgColor = useAppSelector((state) => state.status.bgColor)
   return (
     <div>

src/pages/Answer/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React from 'react'
 import { css } from '@emotion/react'
 import { colorToRgb } from '/@/utils/color'
 import AnswerCanvas from './AnswerCanvas'
@@ -8,17 +8,9 @@ import { card } from '/@/utils/card'
 import LineTimerCard from '/@/components/LineTimerCard'
 import { useAppDispatch, useAppSelector } from '/@/store/hooks'
 import { setBgColor } from '/@/store/slice/status'
-import { setBeforeUnload, removeBeforeUnload } from '/@/utils/beforeunload'
 
 // 絵を見てお題を当てるページ
 const Answer = () => {
-  useEffect(() => {
-    setBeforeUnload()
-    return () => {
-      removeBeforeUnload()
-    }
-  }, [])
-
   const dispatch = useAppDispatch()
   dispatch(setBgColor('#D1A9A9'))
   const maxTimeMs = useAppSelector((state) => state.answer.timeLimit) * 1000

src/pages/Draw/index.tsx

@@ -17,17 +17,9 @@ import { colorToRgb } from '/@/utils/color'
 import { useAppSelector } from '/@/store/hooks'
 import { areaToXY } from './boardData'
 import { ws, WsEvent, wsListener, wsSend } from '/@/websocket'
-import { setBeforeUnload, removeBeforeUnload } from '/@/utils/beforeunload'
 
 // 絵を描くページ
 const Draw = () => {
-  useEffect(() => {
-    setBeforeUnload()
-    return () => {
-      removeBeforeUnload()
-    }
-  }, [])
-
   const boardSize = 4 // TODO
   const [previewImage, setPreviewImage] = useState<string | null>(image)
   const [drawnArea, setDrawnArea] = useState<[number, number][]>([])

src/pages/Lobby.tsx

@@ -8,17 +8,9 @@ import MemberList from '/@/components/MemberList'
 import { colorToRgb } from '/@/utils/color'
 import { card } from '/@/utils/card'
 import { setBgColor } from '../store/slice/status'
-import { setBeforeUnload, removeBeforeUnload } from '/@/utils/beforeunload'
 
 // 待機部屋(ROOM)
 const Lobby = () => {
-  useEffect(() => {
-    setBeforeUnload()
-    return () => {
-      removeBeforeUnload()
-    }
-  }, [])
-
   const dispatch = useAppDispatch()
   dispatch(setBgColor('#DCCCA2'))
   const userId = useAppSelector((state) => state.user.userId)

src/pages/Result/index.tsx

@@ -8,17 +8,9 @@ import FlatButton from '/@/components/FlatButton'
 import { useAppSelector, useAppDispatch } from '/@/store/hooks'
 import { wsSend } from '/@/websocket'
 import { setBgColor } from '/@/store/slice/status'
-import { setBeforeUnload, removeBeforeUnload } from '/@/utils/beforeunload'
 
 // 回答表示するページ(SHOW)
 const Result = () => {
-  useEffect(() => {
-    setBeforeUnload()
-    return () => {
-      removeBeforeUnload()
-    }
-  }, [])
-
   const dispatch = useAppDispatch()
   dispatch(setBgColor('#96A0C0'))
   const [btnText, setBtnText] = useState('結果を見る')

src/pages/Theme/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React from 'react'
 import { css } from '@emotion/react'
 import { colorToRgb } from '/@/utils/color'
 import { card } from '/@/utils/card'
@@ -7,17 +7,9 @@ import ThemeInput from './ThemInput'
 import LineTimerCard from '/@/components/LineTimerCard'
 import { useAppDispatch, useAppSelector } from '/@/store/hooks'
 import { setBgColor } from '/@/store/slice/status'
-import { removeBeforeUnload, setBeforeUnload } from '/@/utils/beforeunload'
 
 // お題を入力するページ(ODAI)
 const Theme = () => {
-  useEffect(() => {
-    setBeforeUnload()
-    return () => {
-      removeBeforeUnload()
-    }
-  }, [])
-
   const dispatch = useAppDispatch()
   dispatch(setBgColor('#96A0C0'))
   const maxTimeMs = useAppSelector((state) => state.theme.timeLimit * 1000)