javascript - React-Router 中的活動連結?

我正在嘗試使用 React-Router (v4)，並且在啟動導航時遇到了一些問題，希望其中一個 Link 能夠是 active。如果我點擊任何 Link 標籤，active 功能就會開始正常運作。然而，我希望在應用程式啟動時 Home Link 就處於 active 狀態，因為這個組件是在 / 路由載入的。有辦法做到這一點嗎？

這是我目前的程式碼：

const Router = () => (
  <BrowserRouter>
    <div>
      <Nav>
        <Link activeClassName='is-active' to='/'>Home</Link> {/* I want this to start off as active */}
        <Link activeClassName='is-active' to='/about'>About</Link>
      </Nav>

      <Match pattern='/' exactly component={Home} />
      <Match pattern='/about' exactly component={About} />
      <Miss component={NoMatch} />
    </div>
  </BrowserRouter>
)

答案＃1

這是一個針對 React Router v4 的舊且過時的答案

<Link> 不再有 activeClassName 或 activeStyle 屬性。在 react-router v4 中，如果你想要進行條件樣式，必須使用 <NavLink>：

const Router = () => (
  <BrowserRouter>
    <div>
      <Nav>
        <NavLink exact activeClassName='is-active' to='/'>Home</NavLink>
        <NavLink activeClassName='is-active' to='/about'>About</NavLink>
      </Nav>

      <Match pattern='/' exactly component={Home} />
      <Match pattern='/about' exactly component={About} />
      <Miss component={NoMatch} />
    </div>
  </BrowserRouter>
)

我在首頁的 <NavLink> 添加了一個 exact 屬性，我相當確定如果沒有它，首頁的連結將會一直處於激活狀態，因為 / 會匹配 /about 以及你擁有的其他頁面。

答案＃2

React Router v6：

來源：使用 React Router 的活動 NavLink 類別

現在你可以使用 className 屬性，它現在接受一個函數並傳遞一個 isActive 布林值屬性，如下所示：

<NavLink
  to="users"
  className={({ isActive }) => (isActive ? 'active' : 'inactive')}
>
  Users
</NavLink>

你也可以添加多個類別，因為 v6 已經推出了：

<NavLink
  to="users"
  className={({ isActive }) =>
    isActive ? 'bg-green-500 font-bold' : 'bg-red-500 font-thin'
  }
>
  Users
</NavLink>

實時演示：使用 React Router 的活動 NavLink 類別

答案＃3

import { NavLink, useMatch, useResolvedPath } from 'react-router-dom';

const CustomNavLink = ({ to, title }) => {
   let resolved = useResolvedPath(to);
   let match = useMatch({ path: resolved.pathname, end: true });

   return (
      <NavLink to={to} className={`d-flex align-items-center py-2 px-4 ${match ? 'cta-btn' : 'c-n-b-link'}`} >
        <span className='ms-1 f-w-600'>{title}</span>
      </NavLink>
)
}

對於 React router V6 上述自訂元件將返回一個 navlink，當路徑符合給定的 to 路徑時，active 類別可以被啟用。