使用 Nav 组件的 React Bootstrap 会刷新应用程序

Question

我尝试使用带有引导类的简单链接，如下所示，它工作正常。

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<ul class="navbar-nav">
<li class="nav-item">
<Link class="nav-link" to="/">
Home
</Link>
</li>
<li class="nav-item">
<Link class="nav-link" to="/login">
Login
</Link>
</li>
<li class="nav-item">
<Link class="nav-link" to="/product">
Product
</Link>
</li>
<li class="nav-item">
<Link class="nav-link" to="/product/3">
Details
</Link>
</li>
</ul>
</nav>

但是当我尝试使用react-bootstrap库中的Nav组件时，如下所示，它会在每次单击时刷新应用程序，就像使用锚标记一样，这可能是因为我在这里使用了href。但是我不知道我怎么能只使用类似于Link中的to的属性。

<Nav defaultActiveKey="/" as="ul">
<Nav.Item as="li">
<Nav.Link href="/">Home</Nav.Link>
</Nav.Item>
<Nav.Item as="li">
<Nav.Link href="/login">Login</Nav.Link>
</Nav.Item>
<Nav.Item as="li">
<Nav.Link href="/product">Product</Nav.Link>
</Nav.Item>
</Nav>

Answer 1

尝试将Nav.Link与as={Link}一起使用，to而不是像下面这样href道具：

import { Link } from 'react-router-dom'

<Nav.Link as={Link} to="/login">...</Nav.Link>

工作示例演示