ReactJS NavLink activeClassName

Question

我想要在当前路由和所选路由相同时，使用active类渲染NavLink。以下是代码：

```

我希望当路由与当前路由相同时，使用active类渲染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？有什么想法吗？

- Aceconhielo

Answer 1

对于任何在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的属性。这个属性的真值可以被用来动态地添加类名。

---

但是带有位置的版本可以像这样完成：

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

- PsiKai

Answer 2

你可以这样做：

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

还是我不理解你的问题？

- mxmln

---

我之前尝试过这个，但是因为这个 NavLink 在 Route 之外，所以位置未定义。我已经编辑了我的问题。 - Aceconhielo