How to make MUI Tab to have multiple routes - reactjs

Question

I'm trying to make a simple navigation component with Material UI, React Router v6 and TypeScript. I have AppBar component with Tabs inside, it looks like this:
NavBar screenshot
The layout component renders the <Navigation /> component that contains what I mentioned above and the <Outlet /> to render the component according to the current path.
The problem is that I have two components for user: one to view users (its like a table that lists the users) and the second is a screen to create users (routes are "/secure/users" and the other is "/secure/userCreate"). When I click on the "Users" tab, the userView component gets rendered, because as u can see in the code below, I have the tab
<Tab label="Users" value={routes[6]} to="/secure/users" component={Link} />
to match the user view route ("/secure/users"), but that component has a button to create a new user, it redirects you to "/secure/userCreate" , but that way MUI tab gives me an error because there is no Tab that matches that route.
So my question is, how can I make the Users tab stay selected when I'm in the userView component and then also be selected on user creation? Because I think that would need the tab to match both routes at the same time, "/secure/users" and "/secure/userCreate", and I dont know how to do that or if its possible
Here's my code so far:
navigation.component.tsx
const routes = ["/secure/books", "/secure/offers", "/secure/products", "/secure/vacation", "/secure/others", "/secure/reports", "/secure/users"];
function useRouteMatch(patterns: readonly string[]) {
const { pathname } = useLocation();
for (let i = 0; i < patterns.length; i += 1) {
const pattern = patterns[i];
const possibleMatch = matchPath(pattern, pathname);
if (possibleMatch !== null) {
return possibleMatch;
}
}
return null;
}
export const Navigation = (): ReactElement => {
const permission = getPermission();
const routeMatch = useRouteMatch(routes)
const currentTab = routeMatch?.pattern?.path;
return (
<Container style={{ marginTop: 34}}>
<AppBar
position="static"
style= {{ background: '#FFFFFF'}}
elevation={0}
>
<Container maxWidth="xl">
<Tabs
value={currentTab}
aria-label="nav tabs example"
variant="scrollable"
scrollButtons="auto"
sx={{
'& .MuiTab-root': {
fontSize: 18,
fontWeight: 600,
lineHeight: '175%',
letterSpacing: '0.15px',
padding: '5px 0px 5px 0px',
color: 'rgba(0, 54, 101, 0.6)',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'flex-start',
marginRight: 6.25,
minWidth: 0,
},
'& .MuiTabs-indicator': {
backgroundColor: "#01A3FE",
},
'& .Mui-selected': {
color: "#01A3FE !important",
}
}}
>
<Tab label="Books" value={routes[0]} to="/secure/books" component={Link} />
<Tab label="Offers" value={routes[1]} to="/secure/offers" component={Link} />
<Tab label="Products" value={routes[2]} to="/secure/products" component={Link} />
<Tab label="Vacation" value={routes[3]} to="/secure/vacation" component={Link} />
<Tab label="Others" value={routes[4]} to="/secure/others" component={Link} />
<Tab label="Reports" value={routes[5]} to="/secure/reports" component={Link} />
{permission.isAdmin &&
<Tab label="Users" value={routes[6]} to="/secure/users" component={Link} />}
<span className="MuiTabs-indicator css-1aquho2-MuiTabs-indicator" style={{ left: 0, backgroundColor: '#EEEEEE'}}></span>
</Tabs>
</Container>
</AppBar>
</Container>
);
}
layout.component.tsx
export const Layout = (): ReactElement => {
return (
<div>
<Navigation />
<Outlet />
</div>
);
}
Edit: Maybe to clarify a bit, I need the Users Tab to stay selected when I'm in both routes ("/secure/users" and "/secure/userCreate").

Answer 1

You could simply check if the current pathname value is the "/secure/userCreate" path and set the currentTab value to equal that of the "Users" tab's URL path.
Example:
const Navigation = (): ReactElement => {
const { pathname } = useLocation();
const permission = getPermission();
let currentTab = pathname;
if (pathname === "/secure/userCreate") {
currentTab = "/secure/users";
}
return (
<Container style={{ marginTop: 34 }}>
<AppBar position="static" style={{ background: "#FFFFFF" }} elevation={0}>
<Container maxWidth="xl">
<Tabs
value={currentTab}
aria-label="nav tabs example"
variant="scrollable"
scrollButtons="auto"
sx={{ .... }}
>
<Tab
label="Books"
value={routes[0]}
to="/secure/books"
component={Link}
/>
<Tab
label="Offers"
value={routes[1]}
to="/secure/offers"
component={Link}
/>
<Tab
label="Products"
value={routes[2]}
to="/secure/products"
component={Link}
/>
<Tab
label="Vacation"
value={routes[3]}
to="/secure/vacation"
component={Link}
/>
<Tab
label="Others"
value={routes[4]}
to="/secure/others"
component={Link}
/>
<Tab
label="Reports"
value={routes[5]}
to="/secure/reports"
component={Link}
/>
{permission.isAdmin && (
<Tab
label="Users"
value={routes[6]}
to="/secure/users"
component={Link}
/>
)}
<span
className="MuiTabs-indicator css-1aquho2-MuiTabs-indicator"
style={{ left: 0, backgroundColor: "#EEEEEE" }}
></span>
</Tabs>
</Container>
</AppBar>
</Container>
);
};
If you don't want to explicitly check the paths then create an object that maps a pathname value to a tab "key" value, use the tab "key" value in each tab.