与React-Router的活动链接？

Question

我尝试作出反应,路由器(V4)和我有开始关闭导航到具有的一个问题Link的是active.如果我点击任何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

<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 的活动 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 类

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上面的自定义组件将返回一个导航链接，只要路径与给定to路径匹配，就可以激活活动类。