ReactJS NavLink activeClassName

Question

当路线与当前路线相同时，我想使用活动类呈现 NavLink。 这是代码：

<NavLink className="nav-link-gdc" activeClassName="nav-link-gdc-selected" to="/home">HOME</NavLink>

问题是这仅在我重新加载 URL 时才有效，并且当我单击链接时我不知道如何触发类的更改。

编辑：

我的切入点：

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <div>
        <HeaderControl />
        <MuiThemeProvider>
          <Switch>
            <Routes />
            <PrivateRoute path="/" component={Home} />
          </Switch>
        </MuiThemeProvider>
        <Footer />
      </div>
    </ConnectedRouter>
  </Provider>,
  document.getElementById('app'),
);

我想在活动时更改类的所有链接都在 HeaderControl 中。 我怎么能使用道具location ？

有任何想法吗？

Answer 1

您可以执行以下操作：

<NavLink className="nav-link-gdc" activeClassName={location.pathname !== "your pathname"? null : "nav-link-gdc-selected"} to="/home">HOME</NavLink>

还是我不明白你的问题？

Answer 2

任何人在 2022 年以后，最新版本的react-router-dom （目前为 6.3.0 撰写本文时）已弃用NavLink activeClassName 。 取而代之的是，现在可以将回调函数传递给className属性以传入活动类样式。 不再需要location 。

<NavLink 
  className={nav => (nav.isActive ? "main-nav-link active" : "main-nav-link")} 
  to="/"
>
  Home
</NavLink

您可以看到使用isActive属性为该函数提供了一个参数。 该属性的真实性可用于动态添加类名。

---

但是一个带有location的版本可以这样完成：

import { useLocation, NavLink } from 'react-router-dom'

const NavBar = () => {
  const location = useLocation()
    
  return (
    <NavLink 
      className={location.pathname === "/" ? "main-nav-link active" : "main-nav-link")} 
      to="/"
    >
      Home
    </NavLink>
  )
}