React Router v4中如何根据当前路由渲染子菜单？

我懂你的需求——就是只想在访问/about、/about/one或者/about/two这些页面时，才展示指向AboutOne和AboutTwo的导航链接。其实不用纠结手动给<Link>或<NavLink>加active类，我们可以通过路径匹配判断来控制子链接的显示/隐藏，下面给你两种实用的实现方式：

方式一：使用useMatch钩子（推荐） #

useMatch能帮我们判断当前路径是否符合指定规则，直接用它来决定是否渲染子链接：

import { Link, NavLink, useMatch } from 'react-router-dom';

function Navbar() {
  // 匹配 /about 页面，以及所有以 /about/ 开头的子路径
  const isAboutPath = useMatch('/about/*') || useMatch('/about');

  return (
    <nav>
      <ul>
        <li>
          <NavLink to="/">Home</NavLink>
        </li>
        <li>
          <NavLink to="/about">About</NavLink>
          {/* 只有匹配成功时才渲染子链接 */}
          {isAboutPath && (
            <ul className="sub-links">
              <li>
                <Link to="/about/one">About One</Link>
              </li>
              <li>
                <Link to="/about/two">About Two</Link>
              </li>
            </ul>
          )}
        </li>
        <li>
          <NavLink to="/contact">Contact</NavLink>
        </li>
      </ul>
    </nav>
  );
}

这里useMatch('/about/*')会匹配所有/about开头的子路径（比如/about/one、/about/two），再加上useMatch('/about')匹配根about页面，两者只要有一个为真，就显示子链接。

方式二：使用useLocation钩子 #

如果你更习惯直接操作路径字符串，也可以用useLocation获取当前路径，再判断是否包含/about：

import { Link, NavLink, useLocation } from 'react-router-dom';

function Navbar() {
  const location = useLocation();
  // 判断当前路径是否以 /about 开头
  const isAboutPath = location.pathname.startsWith('/about');

  return (
    <nav>
      <ul>
        <li>
          <NavLink to="/">Home</NavLink>
        </li>
        <li>
          <NavLink to="/about">About</NavLink>
          {isAboutPath && (
            <ul className="sub-links">
              <li>
                <Link to="/about/one">About One</Link>
              </li>
              <li>
                <Link to="/about/two">About Two</Link>
              </li>
            </ul>
          )}
        </li>
        <li>
          <NavLink to="/contact">Contact</NavLink>
        </li>
      </ul>
    </nav>
  );
}

这种方式更直观，适合简单的路径判断场景，不过要注意如果你的路由里有类似/about-us这类带/about的其他路径，会出现误判，要是没有这类情况，用这个完全没问题。

额外优化：给激活的子链接加样式 #

如果想让当前子页面的链接高亮，直接用<NavLink>自带的activeClassName或者style属性就行，不用手动控制：

<NavLink 
  to="/about/one" 
  activeClassName="active-link"
>
  About One
</NavLink>

然后在CSS里定义高亮样式：

.active-link {
  color: #2563eb;
  font-weight: bold;
  border-bottom: 2px solid #2563eb;
}

这样就能完美实现你想要的效果啦！

内容的提问来源于stack exchange，提问作者Austin Gayler