與 React-Router 的活動鏈接？

Question

我正在試用 React-Router (v4)，但在啟動 Nav 以active其中一個Link時遇到問題。 如果我點擊任何Link標簽，那么活動的東西就會開始工作。 但是，我希望 Home Link在應用程序啟動后立即處於活動狀態，因為這是在/路由加載的組件。 有什么辦法嗎？

這是我當前的代碼：

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

Answer 1

這是React Router v4的舊的、過時的答案

---

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

const Router = () => (
  <BrowserRouter>
    <div>
      <Nav>
        <NavLink exact={true} 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> ，我很確定沒有它，主頁鏈接將始終處於活動狀態，因為/將匹配/about和您擁有的任何其他頁面。

Answer 2

反應路由器 v6：

資料來源： 帶有 React Router 的 Active 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 的 Active NavLink 類

Answer 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路徑匹配，就可以激活一個活動類。

Answer 4

在我的情況下<NavLink />自動將active類設置為項目，所以我使用以下方法

myComponet.js

<ListItem component={NavLink} to="/somewhere" className="myactive" > something </ListItem>

我的樣式.css

a.active.myactive {
 // some styles
}

Answer 5

作為@Nick 的答案（React Router v6）的補充，對於那些需要在上層上下文中激活導航狀態的人..

條件渲染可能是需要的用例。 例如：如果它處於活動狀態，則呈現填充圖標，否則呈現常規圖標。

這可以通過找到我們當前所在的路線來實現，然后我們可以進行條件渲染操作，但這會有點麻煩。

相反，我們可以編寫一個函數來修改Navlink的 style 屬性中的狀態，如下所示。

  const [active, setActive] = useState('home')

  const activate = (isActive, path, activeStyle, nonActiveStyle) => {
    if (isActive) {
      setActive(path)
      return activeStyle
    }
    return nonActiveStyle
  }

  return (
    <nav>
      <NavLink
        to="/"
        style={(activeNav) => activate(activeNav.isActive, 'home')}
      >
        {active === 'home' ? <HomeFill /> : <Home />}
      </NavLink>
      <NavLink
        to="/profile"
        style={(activeNav) => activate(activeNav.isActive, 'profile')}
      >
        {active === 'profile' ? <ProfileFilled /> : <Profile />}
      </NavLink>
    </nav>
  )

Answer 6

在react-router-dom Version 5.3.0中，我使用以下內容來啟用活動鏈接

類：

active: {
        // background: 'linear-gradient(180deg, #008b32 0%, #cddc39 100%)',
        // backgroundColor: 'slategray',
        borderBottom: '1px solid white',
        borderRadius: '6px',
        boxShadow: 'rgba(6, 24, 44, 0.4) 0px 0px 0px 2px , rgba(6, 24, 44, 0.65) 0px 4px 6px -1px , rgba(255, 255, 255, 0.08) 0px 1px 0px inset',
        color: 'white',
        fontSize: '14px',
        listStyle: 'none',
        marginLeft: '16px',
        padding: '5px',
        textDecoration: 'none',
        textTransform: 'uppercase',
        transition: 'all 0.1s cubic-bezier(0.42, 0.02, 0.06, 0.05) 0.1s',
    },
    link: {
        '&:hover': {
            borderBottom: '1px solid white',
            borderRadius: '6px',
            boxShadow: 'rgba(6, 24, 44, 0.4) 0px 0px 0px 2px , rgba(6, 24, 44, 0.65) 0px 4px 6px -1px , rgba(255, 255, 255, 0.08) 0px 1px 0px inset',
            color: 'white',
            padding: '5px',
            transition: 'all 0.1s cubic-bezier(0.42, 0.02, 0.06, 0.05) 0.1s',
        },
        color: '#ddf1f9',
        fontSize: '14px',
        listStyle: 'none',
        marginLeft: '16px',
        textDecoration: 'none',
        textTransform: 'uppercase'
    },

導航鏈接.js

import React from "react";
import { useLocation } from "react-router-dom";


const NavLinks = classes => {
    const pathname = useLocation().pathname
    return (
        <nav>
            <ul className={classes.navlinks}>
                <li>
                    <Link
                        className={`${pathname === '/' ? classes.active : classes.link}`}
                        to='/'
                    >
                        Login
                    </Link>
                </li>
                <li>
                    <Link
                        className={`${pathname === '/dashboard' ? classes.active : classes.link}`}
                        to='/dashboard'
                    >
                        Dashboard
                    </Link>
                </li>
            </ul>
        </nav>
    )
}

Answer 7

受@Live Software Developer 的啟發，在 v6 中，我相信這樣做要簡單得多（下面的輸入來自 TypeScript）：

const CustomNavLink: React.FC<{ to: string; text: string }> = ({
  to,
  text,
}) => {
  return (
    <NavLink
      to={to}
      className={({ isActive }) => (isActive ? "active" : "inactive")}
    >
      {text}
    </NavLink>
  );
};

Answer 8

React 路由器文檔對此有所幫助： https : //reactrouter.com/web/api/NavLink您可以指定確切的鏈接並設置活動鏈接的樣式

Answer 9

我知道我有點遲到了，但我通過設置內聯樣式來處理這個問題:focus {無論你的風格是什么}我處理大多數樣式內聯，但我很確定這也適用於常規樣式表。 只是用

:focus

代替

:active

編輯

我，由於一些原因（主要是嵌入式軟件），不能使用CSS樣式表。 因此，我逐漸喜歡內聯樣式（與觀點相反，內聯樣式適用於包含大約8000行代碼的項目，涵蓋37個文件，沒有性能影響）。 但不幸的是，在使用內聯這樣的時候， :active選擇器會被竊聽，所以我使用上面的方法。

另一種方法是這樣做，因為我知道內聯樣式有點不受歡迎，就是使用你想要的nav元素的樣式制作一個css active類，並保持一個狀態變量來跟蹤當前頁面的高位在您熟悉的范圍內（最好是根組件），並在用戶導航到另一個頁面時更新它。 這可以通過將<Redirect/>或<Link to={}/>與處理更新狀態和導航的功能組件包裝在一起來完成，並在導航組件中檢查渲染的nav元素是否與當前頁面匹配，以及如果是這樣，請將您的active css類附加到它。