Reactjs 如何使所选项目在react js的侧栏中处于活动状态

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

家

菜单1->1.1子菜单1 ->子菜单2

菜单2->sub1 ->sub2 选择菜单时，它应处于活动状态（颜色：蓝色）。在该菜单1下，如果选择子菜单1，则其颜色也应更改。导航到子菜单1时，侧边栏的子菜单不应关闭。应该打开它。我尝试过不同的解决方案，但无法修复。请帮我解决这个问题。提前谢谢

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

家



菜单1



子菜单1



子菜单2





菜单2



Sub1



Sub2

---

在React js中，有两个组件可导航到路线：

和

为您的应用程序提供了可访问的导航

提供呈现元素的样式属性（如果与URL以及导航相匹配）。一些样式属性是

activeClassName:String

和

activeStyle:Object

activeClassName属性的示例：

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

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

activeStyle示例：

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

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

家

它适用于子菜单。但是我有路径为#的菜单。如何处理它？用/替换#，并在

中写入确切的参数。您需要在程序中编写两次精确的参数，一次使用

，另一次使用

。如果路径类似于

/Home

，则react读取为/+Home，并且仅当精确参数未设置为路径

/

时，

/

的路径将被路由，而不是路径

/Home

。这就是为什么必须将精确参数设置为路径

/

。