[V6] [Feature] `useResolvedPath` should return a function to resolve the path

[fxOne]

We have an inspector with a submenu that displays different items depending on the selected item. The inspector uses react-router.
One requirement is that if the selected item changes and the current menu item is not available for the new item, a redirect should be applied.

My current solution is the following:

function pathMatch(items, pathname ) {
  for (const {value} of items) {
    const resolvedPath = resolvePath(value, pathname);
    if (resolvedPath.pathname === pathname) {
      return true;
    }
  }
  return false;
}

const location = useLocation();
const navigate = useNavigate();
useEffect(() => {
  if (!pathMatch(items, location.pathname)) {
    navigate('..', {replace: true});
  }
}, [items, location.pathname, navigate]);

But sometimes there are more elements in the url which breaks my solution since location.pathname returns the current full URL. eg,: ´pagePath/inpectorPage/newItemDialog´

Currently I see 2 solutions for my problem:

• an implementation like the isActive detection in the NavLink component, which doesm't work because I can't call useResolvedPath in a loop with several different to params
• a hook that return the resolved path for current RouteContext as used in useResolvedPath

[mjackson]

I'm sorry but I'm having a difficult time wrapping my head around your very specific use case. Could you please make an example that illustrates what you're trying to do?

[fxOne]

Sorry @mjackson for the late response. It took some time to create a good example.

Below you can see my sample code. I know that it would make sense to create <Inspector/> as a layout route, but in this case it's just there for explanation. The <Inspector/> is also used on different pages in different levels, which are ignored for simplification in the example.

const menuItems = new Map([
  ['itemType1', [{path: 'inspectorPage1', text: 'Page 1'}, {path: 'inspectorPage2', text: 'Page 2'}]],
  ['itemType3', [{path: 'inspectorPage1', text: 'Page 1'}, {path: 'inspectorPage3', text: 'Page 3'}]],
]);

function Inspector({children}: { children: ReactNode }): ReactElement {
  const {selectedItemId} = useParams<'selectedItemId'>();
  const item = getSelectedItem(selectedItemId);
  return <div>
    <Menu menuItems={menuItems.get(item.type)}/>
    {children}
  </div>;
}

const dialogRoutes: RouteObject[] = [];
export const routes: RouteObject[] = [
  {
    children: [
      {
        children: [
          {
            children: dialogRoutes,
            element: <Inspector><InspectorPage1/></Inspector>,
            path: 'inspectorPage1',
          },
          {
            children: dialogRoutes,
            element: <Inspector><InspectorPage2/></Inspector>,
            path: 'inspectorPage2',
          },
          {
            children: dialogRoutes,
            element: <Inspector><InspectorPage3/></Inspector>,
            path: 'inspectorPage3',
          },
        ],
        path: ':selectedItemId',
      },
    ],
    element: <Page1/>,
    path: 'page1',
  },
  {
    children: dialogRoutes,
    element: <Page2/>,
    path: 'page2',
  },
];

On <Page1/> I can select items with different types. Depending on the selected items I have different inspector pages.
The requirement is that if I switch between items and the same inspector page is available for the new items, this page should be displayed. If it is not, there should be a redirect to the first page.

I'm not sure if I should create another issue for another requirement.
The other feature is that if you navigate between <Page1/> and <Page2/> and return to <Page1/>, you should get the same <Inspector/> page as before on <Page1/>.
My plan is to create a 'redirect' component that redirects you based on a locally stored state. But now I have also the issue that useLocation only returns the full pathname.
In this case I'm missing the resolved path to this location as I could find it in the matches of the RouteContext.

[brophdawg11]

I'm going to convert this to a discussion so it can go through our new Open Development process. Please upvote the new Proposal if you'd like to see this considered!