如何使用 Nav.Link 和 React Router 在 Navbar 中设置活动链接？

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 答案，只是使用 Link 和 NavLink 的答案，而我链接的 URL 没有使用。该页面上也没有使用多个 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 的 Navbar，加载组件 Bluesquare，并使 Navbar 中的单词 One 具有活动样式实际结果：路由加载或 One 具有活动样式

Answer 1

您错过 activeKey了Nav组件中的道具。只需从路由器HOC传递参数

UPD： activeClassName按react-router-dom组件提供，可以看到Nav.Link有activeprop，但它们之间没有任何关系。

解决您的问题的最简单方法是将当前路径传递给组件中的activeKeyprop Nav，以及您可以从HOC提供的 prop 中的pathname字段获得的当前路径。locationwithRouter

UPD2：这里是游乐场