Блог

Я хочу, чтобы раздел кабинета был активным не только для URL-адреса / cabinet/ login, но и для /cabinet / signup и /cabinet / orders . Вот мой код для компонентов App и MainNavigation.

App.js

  <BrowserRouter>
        <Root>
          <Route path='/' exact component={ Home } />
          <Route path='/cabinet/:type' component={ Cabinet } />
          <Route path='/catalog' component={ Catalog } />
          <Route path='/company' component={ Company } />
          <Route path='/contacts' component={ Contacts } />
        </Root>
  </BrowserRouter>
  

MainNavigation.js

 <nav id="menu">
    <ul className="navigation">
        <li style={{height: '20%'}}>
            <NavLink to={"/"} activeClassName="active1" exact>Главная</NavLink>
        </li>
        <li style={{height: '20%'}}>
            <NavLink to={"/cabinet/login"} activeClassName="active2">Кабинет</NavLink>
        </li>
        <li style={{height: '20%'}}>
            <NavLink to={"/catalog"} activeClassName="active2">Каталог</NavLink>
        </li>
        <li style={{height: '20%'}}>
            <NavLink to={"/company"} activeClassName="active3">Компания</NavLink>
        </li>
        <li style={{height: '20%'}}>
            <NavLink to={"/contacts"} activeClassName="active3">Контакты</NavLink>
        </li>
    </ul>
  </nav>
  

Возможно ли иметь Navlink activeClassName для более чем одного URL-адреса?