来自 react-router-dom 主页的 Navlink 始终处于活动状态

Question

导航有效，主页链接始终处于活动状态，其他链接都可以。 添加为组件，没有道具。

HTML

 <Menu/>

CSS

.active{
background-color:#ff6a00;
}

JS

import React, { Component } from 'react';
import './menu.css';
import { NavLink } from 'react-router-dom'
export default class TopMenu extends Component {

 render() {
    return (
        <div className="ui container">
            <div className="ui stackable menu">
                <div className="item">
                    <NavLink to='/' >
                        <i aria-hidden="true" className="home  icon" ></i>
                        Home
                     </NavLink>
                </div>
                <div className="item">
                    <NavLink to='/about' >
                        <i aria-hidden="true" className="circle info  icon" > 
                        </i>
                        About
                    </NavLink>
                </div>

                <div className="item" >
                    <NavLink to='/Settings'>
                        <i aria-hidden="true" className="cogs icon red" ></i>
                        Settings
                    </NavLink>
                </div>
            </div>
        </div>
     );
   }
 }

任何人的想法，为什么家总是活跃的？

Answer 1

您必须为本地路线“ /”指定确切的道具，因为它与所有其他路线匹配，这就是为什么“ /”始终处于活动状态的原因。

 <NavLink to='/' exact={true}>
   <i aria-hidden="true" className="home  icon" ></i>
   Home
 </NavLink>

Answer 2

 .active--link{ color:red; }

 <NavLink to="/" activeClassName="active--link" className="your custom class" > Home </NavLink> <NavLink to="/classes" activeClassName="active--link" className="your custom class" > Classes </NavLink>

Answer 3

您需要提及回家路线的end 。 默认情况下/与它的所有后代路径匹配， /about或/settings也是如此。

<NavLink to="/" end>
  Home
</NavLink>

如果使用了 end 属性，它将确保该组件在其后代路径匹配时不会被匹配为“活动”。

文档： https://reactrouter.com/en/6/components/nav-link

Answer 4

确保您提及end回家（ '/' ）路线。

<NavLink to='/' end>
     <i aria-hidden="true" className="home  icon" ></i>
     Home
</NavLink>