使用React Router和useLocation获取数据

Question

我想每次在React Router中访问路由时触发api调用。例如，每次我路由到/list时，List组件都会调用其API。安装组件时，无法通过useEffect进行此操作，因为每次触发路由时都不会安装该组件。我正在考虑像这样观看位置挂钩：

import { useLocation } from 'react-router-dom';

const MyComponent = () => {
  const location = useLocation()

  React.useEffect(() => {
    // runs on location, i.e. route, change
    console.log('handle route change here', location)
  }, [location])
  ...
}

我的问题是，如果几个组件正在监视位置，那么它们都将触发其useEffect并调用其API。我需要确认此位置实际上是屏幕上当前显示的位置。我可以使用location.pathName来获取路径，但是如何验证这是组件的正确路径？还是我走错路了？