React JS：点击时如何设置导航链接为激活状态

我是ReactJS新手，已经创建了导航头部页面，但点击导航链接时active类无法正常工作。我使用了带动态类的NavLink标签，问题是所有链接始终显示激活状态。

PortalNavbar.js #

import React from "react";
import { Button, Nav } from "react-bootstrap";
import Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
import { useNavigate, Outlet, NavLink } from "react-router-dom";
import '../../index.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';

const PortalNavbar = () => {

    const navigate = useNavigate();

    const logout = () => {
        localStorage.clear();
        navigate('/auth/login');
    }

    return (
        <React.Fragment>

            <header>
                <nav className="navbar navbar-expand-sm bg-white navbar-light">
                    <div className="container-fluid">
                        <ul className="navbar-nav">
                            <li className="nav-item">
                                <NavLink exact="true" className="nav-link logoheader mx-3" to='/' >REACT.COM
                                </NavLink>
                            </li>
                            <li className="nav-item">
                                <NavLink exact="true" className={(navData) => (navData.isActive ? "active nav-link mx-3" : 'nav-link mx-3')} to='/' >Home</NavLink>
                            </li>
                            <li className="nav-item">
                                <NavLink className={(navData) => (navData.isActive ? "active nav-link mx-3" : 'nav-link mx-3')} to='/dashboard'>Dashboard</NavLink>
                            </li>

                            <li className="nav-item">
                                <Button className="btn-warning" onClick={logout}>Logout</Button>
                            </li>
                        </ul>
                    </div>
                </nav>
            </header>
        </React.Fragment>

    );
}

export default PortalNavbar;

index.css #

.active {
  border-bottom: 2px #61dafb solid;
  padding-bottom: 3px;

}

.nav-link {
  color: #000 !important;
  font-weight: 500;
  font-size: 18px;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

问题原因与修复方案 #

1. 核心问题：React Router v6 废弃了exact属性

你使用的是React Router v6（从useNavigate、Outlet等API可判断），该版本已移除NavLink的exact属性，改用end属性实现完全路径匹配。原代码中的exact="true"无效，导致根路径/会匹配所有以/开头的路径（比如/dashboard），进而让Home链接始终处于激活状态。

2. 修复步骤

将所有exact="true"替换为end属性，动态类名逻辑保持不变（也可简化写法，效果一致）：

修改后的关键代码片段：

<li className="nav-item">
    <NavLink end className="nav-link logoheader mx-3" to='/' >REACT.COM</NavLink>
</li>
<li className="nav-item">
    <NavLink end className={({ isActive }) => isActive ? "active nav-link mx-3" : "nav-link mx-3"} to='/' >Home</NavLink>
</li>
<li className="nav-item">
    <NavLink className={({ isActive }) => isActive ? "active nav-link mx-3" : "nav-link mx-3"} to='/dashboard'>Dashboard</NavLink>
</li>

补充说明

• 若/dashboard存在子路由（如/dashboard/profile），且希望访问子路由时Dashboard链接保持激活，不要给它加end属性；
• 若仅希望路径完全等于/dashboard时激活该链接，给它加上end属性即可。

内容的提问来源于stack exchange，提问作者A prasad