Replace history.listen in React Router V6

[lsbyerley]

We leverage the history.listen and history.action methods/variables on the v5 history object. It doesn't appear anything similar exists in the v6 version for useNavigate.

Are there any tips/recommendations on how to handle this?

We have a useEffect similar to this:

useEffect(
    () =>
      history.listen((location) => {
        if (!isValidRoute(location.pathname)) {
          return;
        }

        const nextParams = matchLocation(location);
        if (nextParams) {
          handleChange(nextParams);
        }
      }),
    [history]
  );

[sandysameh]

@lsbyerley did u find any solution for this ?

[lsbyerley]

@sandysameh Ended up settling on these two useEffects. Hope it helps

useEffect(() => {
  if (navigationType !== 'POP' && isValidRoute(pathname)) {
    // fires on navigation
  }
}, [pathname]);

useEffect(() => {
  if (navigationType === 'POP' && isValidRoute(pathname)) {
    // fires on initial load
  }
}, []);