Реакция - предпочтительный способ выполнить действие при выходе из страницы / изменении маршрута

Question

Я пишу приложение реагирования, которое использует react-router-dom для маршрутизации. Для одного из маршрутов мне нужно выполнить действие, когда пользователь уходит (выполнить запрос API и остановить таймер). Я могу сделать это либо

1. В функции очистки, возвращаемой хуком useEffect внутри компонента, отображаемого для этого маршрута

или

Подключиться к маршрутизатору и обнаружить изменения маршрута.

Какой путь лучше? Или, может быть, есть другой способ?

Answer 1

Я попытаюсь использовать инструменты реагирующего маршрутизатора для создания эффектов во время навигации.

Размонтирование является побочным эффектом навигации, но, возможно, не может быть отключено, или вы можете отключить этот компонент по другим причинам.

если вы используете хуки, возможно, вы можете использовать useLocation и сохранить текущую страницу и сделать что-то вроде этого:

function usePageViewTracker() {
  const location = useLocation()
  [lastLocation, setLastLocation] = useState('')
  useEffect(() => {
    if (lastLocation === 'specialLocation') {
      // call your API
    }
    setLastLocation(location)
  }, [location])

}

Answer 2

Вы можете использовать componentWillUnmount. Тем не менее, useEffect работает так же хорошо! Это, вероятно, лучший способ справиться с этим событием.