Why is my custom hook not re-initialised on path change?

Question

I am using ReactRouter to route the application ( BrowserRouter at the top level) with a Switch that includes all the routes. In my use-case I want to be able to handle paths that include the path-parameters ( bedId ) and navigate between different sub-paths (ie /beds/:bedId/ , /beds/:bedId/info/ ) as well asa case where the path is ( /beds/- ). I also want to be able to direct user to a different "bed" while they are already on some bed, so /beds/bed1/info -> /beds/bed2 , and so on...

My BedView component is responsible for routing within that /beds/:bedId path like so:

// App.jsx (fragment)

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

The problem occurs when I try to use a hook that relies on the current path-parameter to fetch the latest data (ie call to /beds/bed1 will result in a call to http://myapi.com/beds/bed1/timeseries ). The useLatestData hook is called from the BedView component, which look like so:

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

...and the useLatestData hook is available here .

The problem is the fact that upon redirecting from /beds/bed1/info to /beds/bed2/info , the hook does not update its props, even though the BedView component seems to be re-rendering. I have created a version of the hook that 'patches' the problem by adding an useEffect hook in my custom hook, to detect the change in path (as supplied in the function arguments) and set data to null, but then the behaviour changes on the BedView.jsx 's end - making the following check fail:

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

I'm not entirely sure which part is the culprit here and any guidance would be much appreciated! As far as I'm aware, the hook is no re-initialised because the path change still results in the same component. There is also one caveat, once I change the BrowserRouter to include the forceRefresh flag, everything works fine. Naturally, I don't want my page to refresh with every redirect though...

Answer 1

try this:

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