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）。从BedView组件调用useLatestData钩子，如下所示：

// 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。

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

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

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

Answer 1

尝试一下：

info.plist

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

1 个答案: