◐ Shell
clean mode source ↗

fix: Fix showing selected navigation item in UI sidebar by peruukki · Pull Request #4969 · feast-dev/feast

@peruukki

Our `useMatchSubpath` hook uses these two react-router-dom hooks:

1. useResolvedPath
2. useMatch

After some investigation, I found that useMatch doesn't work with
relative or partial paths:
remix-run/react-router#8684 (comment).
Furthermore, in our Sidebar useResolvedPath doesn't include any parts of
the current page pathname in the result, resulting in just e.g.
/data-source, and thus useMatch doesn't return a match.

Not sure exactly why this happens, since we get a full resolved path
when calling useMatchSubpath in at least RegularFeatureInstance.tsx, but
it's probably related to where we render the components in the component
tree, and Sidebar is rendered outside the React Router Outlet component.

I found out these differences with some console.logs in useMatchSubpath.

The fix is to include the full path when calling useMatchSubpath in
Sidebar, so that it fully matches the current location used by useMatch.

Signed-off-by: Harri Lehtola <peruukki@hotmail.com>