是否可以将Navlink activeClassName用于多个网址? [反应]

时间:2019-04-20 10:13:38

标签: javascript reactjs jsx react-router-dom

我希望“内阁”部分不仅对/ cabinet / login url有效,而且对于/ 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?

0 个答案:

没有答案