1 Link 如何在 React-Router-Dom 中監聽 2 條路徑？

Question

我的 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 已經為這種情況實現了一些東西，但我還找不到它，有人可以幫忙嗎？

Answer 1

您可以利用<Redirect /> ：

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

這將提供一個清晰的位置來識別路由的使用方式，並最終准備好用真實的內容替換，而不僅僅是重定向。

如果您只想控制<NavLink />的活動狀態，請使用isActive <NavLink /> ：

 isActive={(match, location) => {
         return location.pathname === '/home' || location.pathname === '/';
 }}

Answer 2

您可以使用isActive道具。 它需要一個回調來決定這個項目是否處於活動狀態

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

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