The Header module must match only the root path segment, while the Submenu module can compare the entire URL pathname. Keep in mind that if there are additional sub-routes, the Submenu module will need to check the first two segments.
Instead of having the Tab components display a raw anchor tag <a>, they should render a Link component. This allows the router to handle the navigation action, instead of triggering a page request from the browser and reloading the entire application.
Header
import { Tabs, Tab } from "@material-ui/core";
import { Link, useLocation } from "react-router-dom";
const Header = () => {
const { pathname } = useLocation();
const base = `/${pathname.slice(1).split("/").shift()}`;
return (
<Tabs value={base}>
<Tab component={Link} to="/" label="Home" key="/" value="/" />
<Tab
component={Link}
to="/about"
label="About"
key="/about"
value="/about"
/>
<Tab
component={Link}
to="/dashboard"
label="Dashboard"
key="/dashboard"
value="/dashboard"
/>
</Tabs>
);
};
export default Header;
Submenu
import { Tabs, Tab } from "@material-ui/core";
import { Link, useLocation } from "react-router-dom";
const Submenu = () => {
const { pathname } = useLocation();
return (
<Tabs value={pathname}>
<Tab
component={Link}
to="/about/about-one"
label="About sub one"
key="1"
value="/about/about-one"
/>
<Tab
component={Link}
to="/about/about-two"
label="About sub two"
key="2"
value="/about/about-two"
/>
</Tabs>
);
};
export default Submenu;
App
Ensure that the routes within the Switch are ordered in reverse order of path specificity, so that more specific paths are matched before less specific ones.
<Router>
<Layout>
<Switch>
<Route path="/about/about-one">
<AboutOne />
</Route>
<Route path="/about/about-two">
<AboutTwo />
</Route>
<Route path="/about">
<About />
</Route>
<Route path="/dashboard">
<Dashboard />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</Layout>
</Router>
https://codesandbox.io/s/tabs-subnavigation-forked-pwtf21?fontsize=14&hidenavigation=1&module=%2Fsrc%2FHeader.tsx&theme=dark
https://i.stack.imgur.com/EFFc5.png
To update for handling submenu tabs on the root route "/", you'll need to implement a workaround. Check that the URL path is not one of the main root routes to override the base Tabs value to be exactly "/" instead of one of the "/home-section/*" sub-routes using the matchPath utility function.
Example:
import { Tabs, Tab } from "@material-ui/core";
import { Link, useLocation, matchPath } from "react-router-dom";
const Header = () => {
const { pathname } = useLocation();
const base = `/${pathname.slice(1).split("/").shift()}`;
const isNotHome = ["/about", "/dashboard"].some((path) =>
matchPath(pathname, path)
);
return (
<Tabs value={isNotHome ? base : "/"}>
<Tab component={Link} to="/" label="Home" key="1" value="/" />
<Tab component={Link} to="/about" label="About" key="2" value="/about" />
<Tab
component={Link}
to="/dashboard"
label="Dashboard"
key="3"
value="/dashboard"
/>
</Tabs>
);
};
export default Header;