与React-Router的活动链接?


85

我正在尝试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>
)

Answers:


205

<Link>不再具有activeClassNameactiveStyle属性。在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>,我很确定没有它,home链接将始终处于活动状态,因为/它将与/about您拥有的任何其他页面匹配。


2
我今天忽略了这个答案,因为我认为使用NavLink可以一眼避免该问题。很难找到其他任何可以解释这一点的地方。人们需要赞成这个答案,因为他是正确的。您必须使用NavLink。也!完全一样= {true}也完全正确。否则,当您单击其他链接导致home始终处​​于活动状态时,渲染的第一个链接将不会重新渲染。希望我能再投票10次。
wuno

4
只是一个快速的注意,如果你使用的阵营与终极版,您需要按照这个github.com/ReactTraining/react-router/blob/master/packages/...
切赫亚当

1
在嵌套路线的情况下,你可能需要使用exactNavLink太多。
Wiktor Czajkowski

1
谢谢您的链接@PetrAdam-想知道为什么这不起作用!(解决方案是使用来包装connect调用withRouter)。
布赖恩·伯恩斯

1
为了避免Redux阻止重新渲染,可以pure: false为该connect()方法提供选项。有关未更新视图的更多信息:https
Pateta,
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.