NavLink折叠单击子项,父项被激活ClassName Reactjs

时间:2020-01-23 20:24:19

标签: reactjs react-router

朋友您好,我需要您的帮助我想从菜单折叠中选择该子项。activeClassName已激活,其当前定义的css属性被激活,就好像它在所有页面上一样,我已经搜索了信息,我认为原因是因为我的父元素具有到=“ /”的路线,但是由于它是塌陷,所以不应有路线,这是我的代码:

<div className="sidebar">
    <nav className="mt-2">
        <ul className="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">

            <li className="nav-item has-treeview menu-open">
                <NavLink exact to="/" className="nav-link" activeClassName="active">
                    <i className="nav-icon fas fa-home"></i>
                    <p>Panel de Control</p>
                </NavLink>
            </li>
            <li className="nav-item has-treeview">
                <NavLink to="/" className="nav-link" activeClassName="active">
                    <i className="nav-icon fas fa-truck"></i>
                    <p>
                        Moviles
                        <i className="fas fa-angle-left right"></i>
                        <span className="badge badge-danger right">6</span>
                    </p>
                </NavLink>

                <ul className="nav nav-treeview">
                    <li className="nav-item">
                        <NavLink to="/pages/Seguimiento" className="nav-link">
                            <i className="far fa-circle nav-icon"></i>
                            <p>Seguimiento</p>
                        </NavLink>
                    </li>
                    <li className="nav-item">
                        <NavLink to="/" className="nav-link">
                            <i className="far fa-circle nav-icon"></i>
                            <p>Auditoria Moviles</p>
                        </NavLink>
                    </li>
                    <li className="nav-item">
                        <NavLink to="/" className="nav-link">
                            <i className="far fa-circle nav-icon"></i>
                            <p>Rutas</p>
                        </NavLink>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>
</div>
</code>

enter image description here

0 个答案:

没有答案