时间戳

首页 > 解决方案 > 如何修复 NavLink 问题（NavLink 不切换活动类）？

react-router - 如何修复 NavLink 问题（NavLink 不切换活动类）？

问题描述

我对 NavLink 组件有疑问。它工作正常，但它不会切换活动类或任何其他类。

我尝试使用 activeClassName 或 activeStyle，但它仍然不起作用。我已经尝试过在 github 或 stackoverflow 上找到的解决方案，但这些都没有解决我的问题。我有反应 ^16.8.6、反应 dom ^16.8.6、反应路由器 ^5.0.1、反应路由器 dom ^5.0.1 和反应脚本 3.0.1

'''

<header>
          <nav>
            <ul>
              <li>
                <NavLink activeClassName="active" to="/" exact >Start</NavLink>
              </li>
              <li>
                <NavLink activeClassName="active" to="/news" >News</NavLink>
              </li>
            </ul>
          </nav>
        </header>
  
.active {
  border-bottom-color: yellow;
}

我希望 NavLink 切换这个类。

标签： react-router

解决方案

这是一个在链接处于活动状态时实现“选定”类的示例，否则实现“正常”类

import React from "react"
import {NavLink} from "react-router-dom"
import "./Components/style.css"


class Navbar extends React.Component{
    render(){
        return(
            <div>
                <ul>
                    <li><NavLink exact to = "/" activeClassName="selected" className="normal"><h3>Start</h3></NavLink></li>
                    <li><NavLink exact to = "/mid" activeClassName="selected" className="normal"><h3>Mid</h3></NavLink></li>
                    <li><NavLink exact to = "/end" activeClassName="selected" className="normal"><h3>End</h3></NavLink></li>



                </ul>   
            </div>
        )
    }
}

export default Navbar

我的样式表是

.normal{
    border: 2px solid green;
}
.selected{
    border: 2px solid yellow;
}

推荐阅读