我的 Navlink 活动类在 React-router-v6 中出现问题

Question

我使用 React-router-v6 创建了一个导航栏。 当我们点击任何 li 元素时，.active 类将会出现 现在我设置了活动类的样式（例如添加背景颜色和颜色），但是当我单击主列表项时 我的徽标也被激活，因为我为徽标图像和主页列表项提供了相同的路径。

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

  function Navbars() {
   return (
    <div>
    <div>
          <ul className="navbar">
           <NavLink to="/">
          <img
          src="https://assets.ccbp.in/frontend/react-js/nxt-trendz-logo-img.png"
          alt="logo-image"
          className="logo-img"
        />
      </NavLink>
      <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>

）； }

导出默认导航栏；

Answer 1

该应用程序正在渲染两个主页

"/"

路径链接。如果您不希望图像链接接收任何“活动”样式，那么我建议将其渲染为常规

Link

组件，以便不应用

"active"

类。

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

...

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