reactjs - 如何使用 Nav.Link 和 React Router 在导航栏中设置事件链接？

Question

我想使用 React Router 在我的网站上包含一个非常基本的导航栏，但样式或路由会根据我所做的更改而变得困惑。

这里说使用 Navbar、Nav 和 Nav.Link https://react-bootstrap.github.io/components/navs/#nav-link-props所以我想用这些。

问题是，在我看来，Nav.Link 需要 href 属性才能将用户发送到该路由，例如/One。但是，顶部的 One 链接没有获得事件样式。如果我删除 href 属性，当我单击该链接时，它会获得事件样式，但不会将用户发送到/One 或加载我想要用于该路由的组件。

我没有看到使用这些标签的 SO 答案，只是使用我链接的 URL 未使用的 Link 和 NavLink 的答案。该页面上也没有使用多个 href 属性的示例。我错过了什么？下面是我的代码。

class Header extends Component {
  render() {
    return (
      <Navbar bg="light" variant="light" fixed="top">
        <Navbar.Brand href="#">MySite</Navbar.Brand>
        <Nav>
          <Nav.Link href="/" activeClassName="active" eventKey="/">Home</Nav.Link>
          <Nav.Link href="/one" activeClassName="active" eventKey="/one">One</Nav.Link>
          <Nav.Link href="/two" activeClassName="active" eventKey="/two">Two</Nav.Link>
        </Nav>
      </Navbar>
    )
  }
}

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <Route path="/" exact strict component={Redcircle} />
          <Route path="/one" exact strict component={Bluesquare} />
          <Route path="/two" exact strict component={Greentriangle} />
        </div>
        </Router>
    );
  }
}

预期结果:将 url 更改为/one 的导航栏，加载组件 Bluesquare，并使导航栏中的单词 One 具有事件样式 实际结果:要么路由加载，要么 One 有事件样式

Answer 1

你 missed activeKey 来自 Nav 组件的 Prop 。 只需从路由器 HOC 传递参数

统一更新: activeClassName 由 react-router-dom 组件提供，你可以看到 Nav.Link 有 active 属性，但它们之间没有任何关系。

解决问题的最简单方法是将当前路径传递给 Nav 组件中的 activeKey 属性，以及您可能从 pathname 获得的当前路径location 属性中的字段，由 withRouter 提供 HOC .

UPD2:这里是playground