如何使用 react-router-dom 将 NavLink 设置为活动状态答案

【问题标题】：How to set a NavLink as active using react-router-dom如何使用 react-router-dom 将 NavLink 设置为活动状态
【发布时间】：2017-09-06 12:37:50
【问题描述】：

我正在使用 react-router-dom，当 url 匹配时我需要将链接设为红色，在我的 up 中有两个 url / => home 和 /map。

使用当前代码，我可以路由到不同的页面，但是在浏览器中更改 url 时，NavLink 没有突出显示。任何想法如何解决它。

import React from 'react'
import { NavLink, Route } from 'react-router-dom'

const Navigation = ({ onClick, id, title, tooltip, url }) => {
  return (
    <div onClick={onClick} alt={tooltip}>
      { <Route path={url} exact children={({ match }) => (

        <div style={match ? {color: 'red'} : {}}>
          {match ? '> ' : ''}<NavLink to={url}>{title}</NavLink>
        </div>
  )} />}
    </div >
  )
}

export default Navigation

const Root = ({ store }) => (
      <Provider store={store}>
        <Router>
          <Switch>
            <Route exact path='/' component={Forecast} />
            <Route exact path='/map' component={Map} />
          </Switch>
        </Router>
      </Provider>
    )

【问题讨论】：

是的，正确，我想将映射 URL 的链接标记为活动。谢谢

标签： javascript reactjs react-router

【解决方案1】：

你的方法有点混乱。但是，如果您想突出显示被导航的活动链接，您只需将 activeClassName 添加到您的 NavLink。像这样的

<NavLink to={url} exact activeClassName="activeLink" style=>{title}</NavLink>

activeLink 的 CSS：

.activeLink {
    color: red;
 }

* react-router-dom: "^4.1.2"

【讨论】：

我已经尝试过这种方法，但是 url 没有被正确标记为激活
我正在添加我的路由器文件，你能告诉我有什么问题吗？

【解决方案2】：

这适用于这种常见错误：

'isActive' 未定义 no-undef
activeClassName 在 NavLink 中不起作用

在 React Router v6 中，activeClassName 将被删除，您应该使用函数 className 将类名应用于活动或非活动 NavLink 组件。

Reference is here.

正常使用以下导入：

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

在 NavLinks 中使用：

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

【讨论】：