Question

我正在阅读有关 https://react-bootstrap.github.io/components/navbar/ 上 Navbar Nav 控件的 react-bootstrap 示例。我当前的菜单按钮根本没有切换。

我在这里阅读了一些帖子，但它们都使用相同的代码示例

<Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
  <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
  <Navbar.Toggle aria-controls="responsive-navbar-nav" />
  <Navbar.Collapse id="responsive-navbar-nav">
    <Nav className="mr-auto">
      <Nav.Link href="#features">Features</Nav.Link>
      <Nav.Link href="#pricing">Pricing</Nav.Link>
      <NavDropdown title="Dropdown" id="collasible-nav-dropdown">
        <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
        <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
        <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
        <NavDropdown.Divider />
        <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
      </NavDropdown>
    </Nav>
    <Nav>
      <Nav.Link href="#deets">More deets</Nav.Link>
      <Nav.Link eventKey={2} href="#memes">
        Dank memes
      </Nav.Link>
    </Nav>
  </Navbar.Collapse>
</Navbar>

我有以下不切换按钮的代码

<Navbar>
  <Navbar.Brand /> // tried this but does not fix it
  <Nav>
    {menuButtonList} // this is any array of menu buttons that include 'Home'
  </Nav>
</Navbar>

当前问题，默认情况下主页按钮突出显示为活动状态。当我单击其他菜单按钮时，它们会突出显示并切换。第一个按钮 Home 保持活动状态。

感谢任何帮助。

Answer 1

实际上，您的 Home 应该保持突出显示，因为它是一个 Navbar.Brand 组件而不是 Nav.Link。 Navbar.Brand 的行为应该是这样的，这与 Brand 的全部内容有关。当您展示您的 Brand 时，您希望它闪耀以加强您的 Brand。

如果您不想要一个 Brand，那么最好切换到另一个嵌套在您的 Nav.Link 组件中的 Nav。

Answer 2

终于弄明白了，它的navitem home URL 属性，将它从“/”更新为“/home”。 url 更新后，主菜单按钮将允许切换。

react js react-boostrap 切换菜单按钮不起作用

2 个答案: