与React-Router的主动链接？

这是 React Router v4 的一个旧的、过时的答案

---

<Link>不再具有 or 属性。在 react-router v4 中，如果你想做条件样式，你必须使用 <NavLink>：activeClassNameactiveStyle

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

React 路由器 v6：

来源： Active NavLink Classes with React Router

现在，您可以使用该属性，该属性现在接受一个函数并传递一个布尔属性，如下所示：classNameisActive

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

作为 @Nick 答案（React Router v6）的补充，对于那些需要在上层上下文中处于活动导航状态的人。

条件渲染可能是满足这一需求的用例。例如：如果它处于活动状态，则渲染填充图标，否则渲染常规图标。

这可以通过找到我们当前所在的路由来实现，然后我们可以执行条件渲染操作，但这会有点麻烦。

相反，我们可以编写一个函数来修改 's style prop 中的状态，如下所示。Navlink

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

在我的情况下，自动将类设置为项目，所以我使用以下方法<NavLink />active

myComponet.js

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

myStyle.css

a.active.myactive {
 // some styles
}

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 V6to

在我使用以下命令来启用活动链接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'
    },

NavLink.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>
    )
}

受到 @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>
  );
};