React - 离开页面/更改路线时执行操作的首选方式答案

【问题标题】：React - the preferred way to perform an action when leaving page / changing routeReact - 离开页面/更改路线时执行操作的首选方式
【发布时间】：2020-07-12 15:41:11
【问题描述】：

我正在编写一个使用 react-router-dom 进行路由的反应应用程序。对于其中一条路线，我必须在用户离开时执行一项操作（执行 api 请求并停止计时器）。我也可以这样做

在为该路由渲染的组件内由useEffect钩子返回的清理函数中

或

连接到路由器并检测路由变化。

哪种方式更好？或者也许还有其他方法？

【问题讨论】：

标签： reactjs react-hooks react-router-dom

【解决方案1】：

我会尝试在你导航的时候使用 react router 工具来制作效果。

卸载是导航的一种副作用，但可能无法卸载，或者您可以出于其他原因卸载该组件。

如果您使用钩子，也许您可以使用useLocation 并存储当前页面并执行以下操作：

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

}

【讨论】：

【解决方案2】：

您可以使用componentWillUnmount。但是，useEffect 也同样有效！这可能是处理此事件的更好方法。

【讨论】：