使用 React Router 中的 NavLink 组件设置活动链接的样式未按预期工作答案

【问题标题】：Styling the active link using the NavLink component from React Router is not working as expected使用 React Router 中的 NavLink 组件设置活动链接的样式未按预期工作
【发布时间】：2021-11-24 05:01:37
【问题描述】：

我使用 NavLink 组件在我的 React 应用程序中设置了活动链接的样式。

我面临的问题如下：

当我点击 Contact 链接时，活动链接样式也会应用到 Home 链接。我只想要 Contact 链接来获得边框底部样式。

我做错了什么？

sn-ps的代码如下：

src/components/Header.js

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

const Header = () => {
  return (
    <nav>
      <ul>
        <li>
          <NavLink to="/" activeClassName="selected">
            Home
          </NavLink>
        </li>
        <li>
          <NavLink to="/about" activeClassName="selected">
            About
          </NavLink>
        </li>
        <li>
          <NavLink to="/contact" activeClassName="selected">
            Contact
          </NavLink>
        </li>
      </ul>
    </nav>
  );
};

export default Header;

src/App.js

import React from "react";
import About from "./components/About";
import Contact from "./components/Contact";
import Home from "./components/Home";
import Header from "./components/Header";
import { Switch, Route } from "react-router-dom";

const App = () => {
  return (
    <>
      <Header />
      <main>
        <Switch>
          <Route path="/about" exact>
            <About />
          </Route>
          <Route path="/contact" exact>
            <Contact />
          </Route>
          <Route path="/" exact>
            <Home />
          </Route>
        </Switch>
      </main>
    </>
  );
};

export default App;

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

基于 react-router 文档，我认为您应该在 NavLink 上添加确切的道具来修复它。

https://reactrouter.com/web/api/NavLink

【讨论】：

是的，这行得通。谢谢

【解决方案2】：

React 路由器 v6：

来源：Active NavLink Classes with React Router

现在您可以使用className 属性，该属性现在接受一个函数并传递一个isActive 布尔属性，如下所示：

<NavLink
  to="users"
  className={({ isActive }) => (isActive ? 'active' : 'inactive')}
>
  Users
</NavLink>

您也可以添加多个类，因为 v6 已发布：

<NavLink
  to="users"
  className={({ isActive }) =>
    isActive ? 'bg-green-500 font-bold' : 'bg-red-500 font-thin'
  }
>
  Users
</NavLink>

演示：Active NavLink Classes with React Router

【讨论】：