如何在React JS的边栏中使所选项目处于活动状态

问题描述

我有一个侧边栏。它包含菜单。每个菜单都有子菜单。

1. 首页

2. 菜单1-> 1.submenu1 -> submenu2

3. 菜单2->子1 ->子2 选择菜单后，它应该处于活动状态（颜色：蓝色）。在菜单1下，如果我们选择子菜单1，则其颜色也应更改。导航到子菜单1时，不应关闭Sidebar的子菜单。它应该被打开。我尝试了不同的解决方案，但无法解决。请帮助我解决此问题。预先感谢。.

     <aside className="main-sidebar sidebar-dark-primary elevation-4">
            <div className="sidebar">
                <nav>
                    <ul className="nav nav-pills nav-sidebar nav-child-indent flex-column" data-widget="treeview" role="menu" data-accordion="false">
                         <li className="nav-item">
                            <Link to="/home" className="nav-link active">
                              <i className="nav-icon fa fa-tachometer"></i>
                              <p>
                                Home
                              </p>
                            </Link>
                         </li>
                        <li className="nav-item has-treeview ">
                            <Link to="#" className="nav-link">
                              <i className="nav-icon fa fa-copy"></i>
                              <p>Menu1 <i className="fa fa-angle-left right"></i>
                              </p>
                            </Link>
                            <ul className="nav nav-treeview">
                                <li className="nav-item">
                                    <Link to="/submenu1" className="nav-link">
                                      <i className="fa fa-circle nav-icon"></i>
                                      <p>Submenu1</p>
                                    </a>
                                 </li>
                                <li className="nav-item">
                                    <Link to="/submenu2" className="nav-link">
                                      <i className="fa fa-circle nav-icon"></i>
                                      <p>Submenu2</p>
                                    </a>
                                 </li>
                            </ul>
                        </li>
                        <li className="nav-item has-treeview">
                            <Link to="#" className="nav-link">
                              <i className="nav-icon fa fa-book"></i>
                              <p>Menu2 <i className="fa fa-angle-left right"></i>
                              </p>
                            </Link>
                            <ul className="nav nav-treeview">
                                <li className="nav-item">
                                    <Link to="/sub1" className="nav-link">
                                      <i className="fa fa-circle nav-icon"></i>
                                      <p>Sub1</p>
                                    </Link>
                                 </li>
                                <li className="nav-item">
                                    <Link to="/sub2" className="nav-link">
                                      <i className="fa fa-circle nav-icon"></i>
                                      <p>Sub2</p>
                                    </Link>
                                 </li>
                            </ul>
                        </li>
   
                    </ul>
                </nav>
   
            </div>
        </aside>
   

解决方法

在React js中，有两个组件可导航到路线： <NavLink>和<Link>。

<Link>为您的React应用程序提供了可访问的导航。

如果

<NavLink>与URL一起导航，则为呈现的元素提供样式属性。某些样式属性为activeClassName:String和activeStyle:Object。

activeClassName属性的示例：

<NavLink to="/" exact activeClassName="selected">Home</NavLink>
<NavLink to="/about" activeClassName="selected">About</NavLink>

在CSS中，

.selected {
   fontWeight: "bold",color: "red"
}

activeStyle示例：

<NavLink to="/" exact activeStyles={{fontWeight: "bold",color: "red"}}>
Home
</NavLink>