React Router项目中如何实现Appbar当前页面对应导航项常驻高亮

问题根源 #

a:active伪类仅在点击触发的瞬间生效，无法保持页面跳转后的常驻高亮效果。你使用的React Router提供了专用的NavLink组件，会自动匹配当前路由路径，为匹配的导航项添加激活状态。

调整步骤 #

1. 替换导航组件导入 #

修改Navbar.js中react-router-dom的导入语句，将Link替换为NavLink，同时补上你现有代码中遗漏的MUI组件导入：

import { NavLink } from "react-router-dom";
import { AppBar, Toolbar, IconButton, Typography } from "@mui/material";

2. 替换Link标签为NavLink并配置激活规则 #

把原代码里所有<Link>标签替换为<NavLink>，同时添加激活样式的配置（你现有代码用了<Switch>属于react-router v5版本，适配如下）：

<Box>
  <NavLink 
    to='/' 
    exact 
    activeClassName="nav-active"
    style={{ textDecoration: 'none', color: 'inherit', marginRight: "1rem" }}
  >
    <Typography variant='body1'>
      Dashboard
    </Typography>
  </NavLink>
  <NavLink 
    to='/aboutus' 
    activeClassName="nav-active"
    style={{ textDecoration: 'none', color: 'inherit', marginRight: "1rem" }}
  >
    <Typography variant='body1'>
      About Us
    </Typography>
  </NavLink>
  <NavLink 
    to='/contactus' 
    activeClassName="nav-active"
    style={{ textDecoration: 'none', color: 'inherit', marginRight: "1rem" }}
  >
    <Typography variant='body1'>
      Contact Us
    </Typography>
  </NavLink>
</Box>

注意首页的NavLink需要加exact属性，避免所有路径都匹配到根路径导致首页一直高亮。

3. 添加激活状态CSS样式 #

在全局CSS文件或者Navbar对应的样式文件中添加激活类的样式，可根据设计需求调整参数：

.nav-active {
  background-color: rgba(255, 255, 255, 0.2);
  padding: 6px 12px;
  border-radius: 4px;
  color: #ffffff !important;
}

补充：react-router v6适配方案 #

如果你后续升级到v6版本，activeClassName属性已被移除，需要通过函数形式动态设置类名：

<NavLink
  to="/aboutus"
  className={({ isActive }) => isActive ? "nav-active" : ""}
  style={{ textDecoration: 'none', color: 'inherit', marginRight: "1rem" }}
>
  <Typography variant='body1'>About Us</Typography>
</NavLink>

内容的提问来源于stack exchange，提问作者Jayanth V