'/' 主頁導航項顏色顯示活躍，甚至在 ReactJs 中更改 NavLink

Question

我正在使用 NavLink 來顯示路由並顯示所選項目的活動項目。默認情況下，即使我切換到其他項目，主頁項目也顯示為活動狀態。 除了家里，其他人都按預期工作。

幫我解決這個錯誤。

在下圖中，主頁（紅色）為活動顏色，即使我切換到聯系人

我的代碼如下：

import React from "react";
import { withRouter, NavLink } from "react-router-dom";

class TopNav extends React.Component {

  render() {
    return (
      <div>
        <nav className="navbar navbar-expand-lg navbar-bg">
          {/* <img className="logo-image" src={logo} alt="logo" /> */} Logo
          <button
            className="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarNav"
            aria-controls="navbarNav"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span className="navbar-toggler-icon"></span>
          </button>
          <div className="collapse navbar-collapse" id="navbarNav">
            <ul className="navbar-nav ml-auto ">
              <li className="nav-item">
                <NavLink
                  className="nav-link menu-list "
                  activeClassName="active"
                  to="/"
                >
                  Home
                </NavLink>
              </li>
              <li className="nav-item ">
                <NavLink
                  className="nav-link menu-list"
                  activeClassName="active"
                  to="about"
                >
                  About
                </NavLink>
              </li>
              <li className="nav-item">
                <NavLink className="nav-link menu-list"  activeClassName="active" to="contact">
                  Contact
                </NavLink>
              </li>
            </ul>
          </div>
        </nav>
      </div>
    );
  }
}
export default withRouter(TopNav);

Answer 1

您還可以在NavLink組件上指定確切的道具。 的to支撐（和path為丙Route組件）通過路徑前綴匹配，且“/”為所有路由的前綴。

精確：布爾

如果為 true，則僅當位置完全匹配時才會應用活動類/樣式。

<NavLink
  className="nav-link menu-list "
  activeClassName="active"
  to="/"
  exact // <-- specify exact match!
>
  Home
</NavLink>