Reactjs 为什么我的自定义钩子没有在路径更改时重新初始化？

我使用ReactRouter通过包含所有路由的交换机来路由应用程序（BrowserRouter位于顶层）。 在我的用例中，我希望能够处理包含路径参数（

bedId

）的路径，并在不同的子路径（即

/beds/:bedId/

，

/beds/:bedId/info/

）之间导航，以及路径为（

/beds/-

）的情况。 我还希望能够在用户已经在某张床上时将其引导到不同的“床”，因此

/beds/bed1/info

->

/beds/bed2

，等等

MyBedView组件负责在

/beds/：bedId

路径内进行布线，如下所示：

//App.jsx（片段）
()}
/>

当我尝试使用依赖于当前路径参数的钩子来获取最新数据时，就会出现问题（即调用

/beds/bed1

将导致调用

http://myapi.com/beds/bed1/timeseries

）。从BedView组件调用

useLatestData

钩子，如下所示：

//BedView.jsx（片段）
导出默认功能床视图（道具）{
const{bedId}=props.match.params；
让{path，url}=useRouteMatch（'/beds/：bedId'）；
const bedData=useLatestData({
路径：`/beds/${bedId}/timeseries`，
checksumPath:`/checksum/timeseries`，
刷新：false
});```
如果（！bedData）{
返回；
}
返回(
}

…并且可用useLatestData挂钩

问题在于，当从

/beds/bed1/info

重定向到

/beds/bed2/info

时，即使BedView组件似乎正在重新渲染，钩子也不会更新其道具。我通过在自定义钩子中添加useEffect钩子创建了一个钩子，以检测路径的更改（如函数参数中提供的）并将数据设置为null，但随后行为会在BedView.jsx的末尾发生变化-导致以下检查失败：

if（！bedData）{
返回；
}

我不完全确定哪一部分是罪魁祸首，任何指导都将不胜感激！据我所知，钩子没有重新初始化，因为路径更改仍然会导致相同的组件。还有一个警告，一旦我更改BrowserRouter以包括

forceRefresh

标志，一切都会正常很好。当然，我不想每次重定向都刷新我的页面…

试试这个：

const {bedId} = props.match.params;
let {path, url} = props.match;

---

你能提供一个JSFIDLE吗？我将尝试创建一个存储库来隔离这个问题。JSFIDLE在构建这个存储库时可能有点困难，并且可以很好地观察路径的变化。不幸的是，这并不能解决我的问题。在按下

/beds/bed2

的链接后（从

/beds/bed1

页开始）地址栏中的路径会更新，但useLatestData钩子不会重新初始化，也不会请求

http://myapi.com/beds/bed2

已生成。