与 React-Router 的活动链接？

IT技术 javascript reactjs ecmascript-6 react-router
2021-02-17 13:12:03

我正在尝试 React-Router (v4) 并且我在从 Nav 开始使用其中一个Linkbe 时遇到了问题active。如果我单击任何Link标签，则活动内容开始工作。但是，我希望 HomeLink在应用程序启动后立即处于活动状态，因为这是在/路线上加载的组件。有没有办法做到这一点？

这是我当前的代码：

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>
)
2个回答

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

我在 home 中添加了一个确切的属性<NavLink>，我很确定如果没有它，主页链接将始终处于活动状态，因为/它将与/about您拥有的任何其他页面匹配。

我今天忽略了这个答案，因为我认为使用 NavLink 乍一看可以避免这个问题。很难找到其他任何地方可以解释这一点。人们需要为这个答案点赞，因为他是完全正确的。你必须使用 NavLink。还！精确={true} 也完全正确。否则，当您单击其他链接导致主页始终处于活动状态时，呈现的第一个链接将不会重新呈现。我希望我能再给你投票 10 次。
2021-04-22 13:12:03
为了避免 redux 阻塞重新渲染，您可以pure: false为该connect()方法提供选项。有关未更新视图的更多信息：https : //github.com/reduxjs/react-redux/blob/master/docs/troubleshooting.md
2021-04-23 13:12:03
在嵌套路由的情况下，您可能也需要使用exactfor NavLink。
2021-05-07 13:12:03
主页 NavLink 上的精确 = {true} 是必须的，否则仪表板始终保持活动状态，很好的解释
2021-05-10 13:12:03
谢谢你的链接，@PetrAdam - 想知道为什么这不起作用！（解决方案是用 包装connect调用withRouter）。
2021-05-14 13:12:03

react-router 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 路由器的活动 NavLink 类

其它你可能感兴趣的问题
上一篇如何使用箭头键移动div 下一篇PHP 中 JavaScript 的 encodeURI 组件的等价物是什么？