Как 1 Link может прослушивать 2 пути в React-Router-Dom? - PullRequest
Новая
       4

Как 1 Link может прослушивать 2 пути в React-Router-Dom?

4 голосов
/ 27 января 2020

У меня есть эта Навигация в моем приложении React: 

<ul className="nav nav-tabs nav-fill">
  <li className="nav-item">
    <NavLink exact to="/" className="nav-link" activeClassName="active">
      Home
    </NavLink>
  </li>  
  <li className="nav-item">
    <NavLink to="/home" className="nav-link" activeClassName="active">
      Home
    </NavLink>
  </li>
  <li className="nav-item">
    <NavLink to="/pictures" className="nav-link" activeClassName="active">
      Pictures
    </NavLink>
  </li>
  <li className="nav-item">
    <NavLink to="/contact" className="nav-link" activeClassName="active">
      Contact
    </NavLink>
  </li>
</ul>

Таким образом, есть 4 вкладки, но я хочу только 3 - "/" и "/ home" обе будут выделять Home-Tab как активную ..

Я почти уверен, что в React-Router что-то реализовано для этого случая, но я пока не смог его найти, кто-нибудь может помочь?

Ответы [ 2 ]

5 голосов
/ 27 января 2020

Вы можете воспользоваться <Redirect />: 

<Route exact path='/' render={() => (
    <Redirect to="/home" />
)}/>

. Это обеспечит четкое место для определения того, как используется маршрут, и в конечном итоге будет готово заменить реальным контентом вместо простого перенаправления.

Если вы хотите просто контролировать активное состояние <NavLink />, используйте isActive prop: 

 isActive={(match, location) => {
         return location.pathname === '/home' || location.pathname === '/';
 }}
0 голосов
/ 27 января 2020

Вы можете использовать isActive проп. Он принимает обратный вызов, который может решить, является ли этот элемент активным или нет

https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/NavLink.md#isactive -fun c

<li className="nav-item">
    <NavLink
      exact
      to="/home"
      className="nav-link"
      activeClassName="active"
      isActive={(match, location) => {
        if (!match) {
          return false;
        }
        return location.path === '/home' || location.path === '/');
      }}
     >
      Home
    </NavLink>
</li>
...