我怎样才能让我的反应路由器活动路由类名干

Question

如何在我的 React 项目中停止重复 nav-btn class？

我正在使用 react-router-dom v6.

<NavLink
  to="/"
  className={(navInfo) => navInfo.isActive
    ? 'nav-btn bg-green-700 text-white'
    : 'nav-btn'
  }
>
  Home
</NavLink>

The picture given below

Answer 1

可以通过包装器组件解决，试试这个：


    function MyCustomNavLink({to, navInfo, children}) {
      return <NavLink to={to} classname={navInfo.isActive ? 'nav-btn bg-green-700 text-white' : 'nav-btn'}>{children}</NavLink>
    }

Answer 2

如果你的意思是具体 "nav-btn" CSS 类名，那么我建议将你的类传递到一个数组中并过滤什么是 active/truthy.

示例：

<NavLink
  to="/"
  className={({ isActive }) =>
    [
      "nav-btn",
      isActive ? "bg-green-700 text-white" : null,
    ]
      .filter(Boolean)
      .join(" ")
  }
>
  Home
</NavLink>

另一种方法是使用实用程序来处理和有条件地应用类名。 Classnames 是一个很好用的包。

示例：

import classnames from 'classnames';

...

<NavLink
  to="/"
  className={({ isActive }) => classnames(
    "nav-btn",
    isActive ? "bg-green-700 text-white" : null,
  )}
>
  Home
</NavLink>

我怎样才能让我的反应路由器活动路由类名干

How can I make my react router active route classname DRY

dry

reactjs

react-router