React Router v6中Navlink active类异常问题咨询

问题原因 #

Logo和Home的NavLink都指向根路径"/"，React Router默认的部分匹配规则会导致两个NavLink在路径为"/"时同时被添加.active类。

解决方案1：将Logo的NavLink替换为Link（推荐） #

Logo仅需跳转功能，不需要激活高亮，直接使用Link组件替代NavLink即可避免激活状态冲突：

import React from "react";
import { Link, NavLink } from "react-router-dom"; // 导入Link组件
import "./Navbars.css";

function Navbars() {
  return (
    <div>
      <div>
        <ul className="navbar">
          {/* 用Link替换NavLink */}
          <Link to="/">
            <img
              src="https://assets.ccbp.in/frontend/react-js/nxt-trendz-logo-img.png"
              alt="logo-image"
              className="logo-img"
            />
          </Link>
          <li>
            <NavLink to="/" className="navbar-link">
              Home
            </NavLink>
          </li>
          <li>
            <NavLink to="/carts" className="navbar-link">
              Carts
            </NavLink>
          </li>
          <li>
            <NavLink to="/products" className="navbar-link">
              Products
            </NavLink>
          </li>
          <li>
            <button type="button" className="btn btn-primary m-2">
              Logout
            </button>
          </li>
        </ul>
      </div>
    </div>
  );
}

export default Navbars;

解决方案2：给Home的NavLink添加end属性 #

如果需要保留Logo的NavLink，可以给Home的NavLink添加end属性开启完全匹配，同时自定义Logo的NavLink样式避免激活：

import React from "react";
import { NavLink } from "react-router-dom";
import "./Navbars.css";

function Navbars() {
  return (
    <div>
      <div>
        <ul className="navbar">
          {/* 自定义className，强制不应用active类 */}
          <NavLink 
            to="/" 
            className={() => "logo-navlink"} // 固定类名，忽略激活状态
          >
            <img
              src="https://assets.ccbp.in/frontend/react-js/nxt-trendz-logo-img.png"
              alt="logo-image"
              className="logo-img"
            />
          </NavLink>
          <li>
            {/* 添加end属性，仅完全匹配"/"时激活 */}
            <NavLink to="/" className="navbar-link" end>
              Home
            </NavLink>
          </li>
          <li>
            <NavLink to="/carts" className="navbar-link">
              Carts
            </NavLink>
          </li>
          <li>
            <NavLink to="/products" className="navbar-link">
              Products
            </NavLink>
          </li>
          <li>
            <button type="button" className="btn btn-primary m-2">
              Logout
            </button>
          </li>
        </ul>
      </div>
    </div>
  );
}

export default Navbars;

说明 #

• end属性是React Router v6新增的，开启后只有当前路径与to属性值完全一致时，NavLink才会被标记为激活状态。
• 第一种方案更简洁，符合Logo通常不需要高亮的场景。

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