react js react-bootstrap切换菜单按钮不起作用答案

【问题标题】：react js react-boostrap toggling menu buttons not workingreact js react-bootstrap切换菜单按钮不起作用
【发布时间】：2021-01-05 19:54:44
【问题描述】：

我正在阅读 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 保持活动状态。

感谢任何帮助。

【问题讨论】：

我认为您缺少NavBar.Toggle 和NavBar.Collapse

标签： reactjs navbar react-bootstrap

【解决方案1】：

实际上，您的Home 应该会保持突出显示，因为它是Navbar.Brand 组件而不是Nav.Link。 Navbar.Brand 的行为应该是这样的，它与 Brand 的含义有关。当您展示您的 Brand 时，您希望它会发光以强化您的 Brand。

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

【讨论】：

如果我删除了品牌也不起作用
我添加了 Toggle 并将其删除。我还添加了没有参数的品牌。默认情况下，主页按钮似乎处于活动状态。我该如何改变这种行为

【解决方案2】：

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

【讨论】：