如何使用 React-boostrap 制作不重新加载页面的 href 下拉项

Question

我使用带有 react-bootstrap 的下拉菜单。

在下拉项中，我填写了一个 href，这将允许我更改页面。

   <Dropdown>
    <Dropdown.Toggle variant="success" id="dropdown-basic">
     Menu
   </Dropdown.Toggle>

   <Dropdown.Menu>
     <Dropdown.Item href="#/action-1">aries</Dropdown.Item>
     <Dropdown.Item href="#/action-2">taurus</Dropdown.Item>

  </Dropdown.Menu>
 </Dropdown>

当我点击一个下拉项时，它会完全重新加载我不想要的页面内容。

    <Dropdown.Item>
      <Link
        to={{
          pathname: `#/action-1`,
        }}
      >
        {' '}
        aries
      </Link>
      </Dropdown.Item>

问题是我收到一条错误消息，告诉我：

 Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>.

你有解决这个问题的方法吗？

Answer 1

试试这个

<Dropdown.Item as={Link} to="/me">text here</Dropdown.Item>

如何使用 React-boostrap 制作不重新加载页面的 href 下拉项

How to make an href dropdown item that does not reload the page with React-boostrap

reactjs

react-bootstrap

react-router

dropdown