Question

我对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切换此类。

Answer 1

这里是当链接处于活动状态时实现“ selected”类的示例，否则实现了“ normal”类

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

如何解决NavLink问题（NavLink不会切换活动类）？

1 个答案: