Reactjs 使用React路由器和useLocation获取数据

我想在react路由器中每次访问路由时触发api调用。例如，每次我路由到

/list

时，

list

组件将调用其API。当组件装入时，无法使用

useffect

执行此操作，因为每次触发路由时都不会装入该组件。我正在考虑像这样观看位置挂钩：

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

获取路径，但如何验证这是组件的正确路径？或者我这样做是错误的吗？

在更新组件之前，您是否可以添加一个If语句，以确定该值是否是您期望的值？我可以对组件的路由进行硬处理是的。只是看起来不太优雅。好吧，在某个时候，你必须硬编码值。。。。。这是不可避免的。但每个组件都可以处理自己的路径。此外，您还可以将路由更改的“侦听”集中在一个地方，而不是所有组件中。。。。可能是一个容器？在更新组件之前，您是否可以添加一个If语句，以确定该值是否是您期望的值？我可以对组件的路由进行硬处理是的。只是看起来不太优雅。好吧，在某个时候，你必须硬编码值。。。。。这是不可避免的。但每个组件都可以处理自己的路径。此外，您还可以将路由更改的“侦听”集中在一个地方，而不是所有组件中。。。。可能是一个容器？