如何使用 React Material UI 选项卡在同一页面上突出显示主导航菜单项和子导航菜单项并获取活动状态

Question

在我的 React

<Header>

组件中，我使用 Material UI Tabs 为主导航创建一个 primary 菜单，并使用 React 路由器链接而不是显示选项卡内容：

    <Tabs value={location.pathname}>
      {(items || []).map((item) => (
        <Tab
          key={item.url}
          label={item.title}
          value={item.url}
          href={item.url}
          disableRipple
        />
      ))}
    </Tabs>

在同一页面上，我再次使用 Material UI 选项卡作为辅助菜单。

主导航菜单项的路线路径是：

/example-path

。当我导航到此路线时，此菜单项会突出显示并处于活动状态。

当辅助菜单项的选项卡与突出显示的主菜单项

/example-path

具有相同的路线时，两个菜单项都会突出显示并处于活动状态。

当我单击另一个辅助菜单项时，只有这个辅助菜单项会突出显示

/example-path/tab-two

。

如何管理同时突出显示主导航中的父项和二级菜单中的各种菜单项？

Answer 1

Header

组件应该只匹配根路径段，而

Submenu

组件可以比较完整的URL

pathname

。请注意，如果您还有更多子路线，那么

Submenu

需要检查前两段。

它应该渲染一个

Tab

组件，而不是渲染原始锚标记

<a>

组件。这样路由器就可以响应并处理导航操作，而不是让浏览器向服务器发出页面请求并重新加载整个应用程序。标题

Link

子菜单

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;

应用程序
按照路径特异性的 

inverse

顺序对

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;

内的路由进行排序，以便在回退到 less 特定路径之前匹配 more 特定路径。 Switch

更新以处理根

<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>

路线上的子菜单选项卡。为此，您需要做一些“黑客”操作来检查 URL 路径

不是其他主要根路由之一，这样您就可以将基本 "/" 值覆盖为完全 使用 Tabs

 实用函数，"/"

代替

"/home-section/*"

子路线之一。示例：matchPath