Replies: 3 comments 1 reply
-
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? |
Beta Was this translation helpful? Give feedback.
-
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 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 I'm not sure if I should create another issue for another requirement. |
Beta Was this translation helpful? Give feedback.
-
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! |
Beta Was this translation helpful? Give feedback.
-
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:
But sometimes there are more elements in the
url
which breaks my solution sincelocation.pathname
returns the current full URL. eg,: ´pagePath/inpectorPage/newItemDialog´Currently I see 2 solutions for my problem:
isActive
detection in theNavLink
component, which doesm't work because I can't calluseResolvedPath
in a loop with several differentto
paramsRouteContext
as used inuseResolvedPath
Beta Was this translation helpful? Give feedback.
All reactions