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

Question

我正在使用 ReactRouter 通过包含所有路由的 Switch 来路由应用程序（顶级的 BrowserRouter）。 在我的用例中，我希望能够处理包含路径参数（bedId）的路径并在不同的子路径（即/beds/:bedId/、/beds/:bedId/info/）之间导航，以及路径为（ /beds/-)。 我还希望能够在用户已经在某张床上时将他们引导到不同的“床”，所以/beds/bed1/info -> /beds/bed2，等等......

我的 BedView 组件负责在 /beds/:bedId 路径内进行路由，如下所示：

// App.jsx (fragment)

<Switch>
  <Route
    path="/"
    exact
    render={() => (<Redirect to="/beds/-"/>)}
  />
  <Route
    path="/beds/-"
    exact
    component={SomeOtherComponent}
  />
  <Route
    path="/beds/:bedId"
    component={BedView}
  />
</Switch>

当我尝试使用依赖于当前路径参数的钩子来获取最新数据时会出现问题（即调用/beds/bed1 将导致调用http://myapi.com/beds/bed1/timeseries）。 useLatestData 钩子是从 BedView 组件调用的，如下所示：

// BedView.jsx (fragment)

export default function BedView(props) {
  const {bedId} = props.match.params;
  let {path, url} = useRouteMatch('/beds/:bedId');

  const bedData = useLatestData({
    path: `/beds/${bedId}/timeseries`,
    checksumPath: `/checksum/timeseries`,
    refresh: false
  });```


  if(!bedData){
    return <Loading/>;
  }

  return (
    <Switch>
       <Route exact path={path}>
         <Redirect to={`${url}/info`}/>
       </Route>
      <Route exact path={`${path}/info`} >
        <SomeComponent info={bedData.info} />
      </Route>
    </Switch>
}

...useLatestData 钩子可用here。

问题在于从/beds/bed1/info 重定向到/beds/bed2/info 时，即使BedView 组件似乎正在重新渲染，钩子也不会更新其道具。我通过在我的自定义钩子中添加一个 useEffect 钩子创建了一个version of the hook that 'patches' the problem，以检测路径的变化（如函数参数中提供的那样）并将数据设置为空，但随后行为发生变化BedView.jsx 的结束 - 使以下检查失败：

  if(!bedData){
    return <Loading/>;
  }

我不完全确定哪一部分是这里的罪魁祸首，任何指导将不胜感激！据我所知，钩子没有重新初始化，因为路径更改仍然会导致相同的组件。还有一个警告，一旦我将 BrowserRouter 更改为包含 forceRefresh 标志，一切正常。当然，我不希望我的页面在每次重定向时都刷新......

Answer 1

试试这个：

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