反应路由器中的activeClassName同时突出显示两个NavLink

Posted 2023-02-22

【中文标题】反应路由器中的activeClassName同时突出显示两个NavLink

【英文标题】：activeClassName in react router is highlighting two NavLinks at the same time

【发布时间】：2019-03-31 11:40:11

【问题描述】：

我正在学习 React Router 并关注 this tutorial 除了突出显示活动 NavLink 的问题外，一切都很清楚并按说明工作（感谢作者）。

查看 css 文件并注意 .current 类：

nav ul 
  list-style: none;
  display: flex;
  background-color: black;
  margin-bottom: 20px;


nav ul li 
  padding: 20px;


nav ul li a 
  color: white;
  text-decoration: none;


.current 
  border-bottom: 4px solid white;

当我加载应用程序时，导航中的主页链接以白色底部边框线突出显示，但即​​使我单击“关于”链接或“联系”链接，它仍保持突出显示。我一步一步地遵循了一切，但这个问题我无法弄清楚。

在阅读了有关 NavLink 的 react 文档和许多在线教程后，仍然不知道如何修复它。

这是我点击关于链接的时候

这是我点击联系链接的时候

这就是教程路由示例的方式

<nav>
    <ul>
      <li><NavLink exact activeClassName="current" to='/'>Home</NavLink></li>
      <li><NavLink exact activeClassName="current" to='/about'>About</NavLink></li>
      <li><NavLink exact activeClassName="current" to='/contact'>Contact</NavLink></li>
    </ul>
  </nav>

请注意 Home 链接是如何保持在其下方的活动白线的，尽管它不再是活动链接。

添加 activeClassName="current" 假设用白色下划线突出显示当前视图，但主页链接仍然用白色下划线突出显示。

所以，请各位有多年经验的人帮忙。

这是我的 app.js

    import React,  Component  from 'react';
import './App.css';
import Main from './components/main';
import Navigation from './components/navigation';




class App extends Component 
  render() 
    return (
        <div>
            <h1> React Router </h1>;
            <h5>  import 'BrowserRouter' from 'react-router-dom' in Appjs</h5>
            <hr></hr>

            <Navigation />

            <Main />
            </div>

    );
  


 export default App;

这是我的 index.js

    import React from 'react';
import ReactDOM from 'react-dom';
//Add browserrouter to use it in your app
import  BrowserRouter  from 'react-router-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

//this router example is from this site 
//https://blog.pusher.com/getting-started-with-react-router-v4/
/*
You can only pass a single child element to a Router,
so it is necessary to create a root component
that renders the rest of your application and
then pass that in as the child of the Router.
*/
ReactDOM.render((
    <BrowserRouter>
        <App />
    </BrowserRouter>
), document.getElementById('root')); 

这是我的 main.js

 import React,  Component  from 'react';
import  NavLink, Switch, Route  from 'react-router-dom';
import Home from './home';
import About from './about'
import Contact from './contact'

class Main extends Component 
    render() 
        return (
            <div>
                <p> My main component </p>
                <Switch>
                    <Route exact=true  path='/' component=Home></Route>
                    <Route   path='/about' component=About></Route>
                    <Route   path='/contact' component=Contact></Route>
                    </Switch>
            </div>
        );
    


export default Main;

最后是我的navigation.js

    import React,  Component  from 'react';
import  NavLink  from 'react-router-dom';

class Navigation extends Component 
    render() 
        return (
            <div>
            <p> My Navigation component </p>
            <nav>
                <ul>
                    <li><NavLink to='/'> Home </NavLink> </li>
                    <li><NavLink to='/about'> About </NavLink> </li>
                    <li><NavLink to='/contact'> Contact </NavLink> </li>
                </ul>
            </nav>
                </div>
        );
    


export default Navigation;

【问题讨论】：

当您单击导航链接时，将活动类添加到其中，并将其从所有其他类中删除

【参考方案1】：

Navlink 也需要精确的...更改为：

import React,  Component  from 'react';
import  NavLink  from 'react-router-dom';

class Navigation extends Component 
  render() 
    return (
      <div>
        <p> My Navigation component </p>
        <nav>
          <ul>
            <li><NavLink to='/' activeClassName="current" exact=true> Home </NavLink> </li>
            <li><NavLink to='/about' activeClassName="current"> About </NavLink> </li>
            <li><NavLink to='/contact' activeClassName="current"> Contact </NavLink> </li>
          </ul>
        </nav>
      </div>
    );
  


export default Navigation;

【参考方案2】：

您应该将exact 属性添加到您的root("") 路由中，否则它将匹配以“”开头的每个路由，React Router exact

例如：

<Route exact path="/" component=Home />
<Route path="/about" component=About />
<Route path="/topics" component=Topics />

更新：

在没有确切属性的情况下更改顺序也会产生相同的效果

<Route path="/about" component=About />
<Route path="/topics" component=Topics />
<Route path="/" component=Home />

在路由器开关侧，它将转到第一个匹配的路由，如果我们在开头添加路径为/的路由，它将始终呈现路径中的组件，最好避免使用精确修复订购

【讨论】：

感谢您抽出宝贵时间回信。它仍然以同样的方式行事。应用您的代码并没有改变链接突出显示的行为

或分享你的路由组件

试试@SakoBu提到的方法

【参考方案3】：

从 <NavLink /> 中移除 activeClassName 和 activeStyle 属性

从 v6.0.0-beta.3 开始，activeClassName 和 activeStyle 属性已从 NavLinkProps 中删除。相反，您可以将函数传递给style 或className，这将允许您根据组件的active state 自定义inline styling 或class string。

类名

<NavLink
  to="/"
  className=( isActive ) => "nav-link" + (isActive ? " activated" : "")
>
  Home
</NavLink>

风格

<NavLink
  to="/"
  style=( isActive ) => ( color: isActive ? 'green' : 'blue' )
>
  Home
</NavLink>

source

【参考方案4】：

必须为 NavLink 组件提供确切的属性。

它的工作原理是这样的， 家 图片

当用户点击Home时，url='/me'，加载home组件，当用户点击图片时，url='/me/pictures'，如果NavLink中没有提供exact，则两个url包含'/me'，这使得它们都处于活动状态。

它是 NavLinks 精确道具的用例。

【参考方案5】：

对于 v6，使用 end 而不是 exact

<NavLink end activeClassName="activeNavLink" to="/">

【参考方案6】：

您可以根据自己的需要在 Navlinks 中使用精确和严格。