reactjs - 在 react 路由器 DOM 和 react Bootstrap 中，Nav.Link vs Link vs NavLink 有什么区别？

Question

我对这三个链接感到困惑，它们有哪些不同的使用方式？

• 导航链接
• 链接
• 导航链接

它们有不同的用例吗？

Answer 1

• Nav.Link : Nav.Link组件由 react-bootstrap 维护并默认返回 anchor ( <a /> ) 标签。
• Link : 是一个专门的 anchor ( <a /> ) 标签，专门链接到由 react-router 维护的内部路由/react-router-dom路由器组件。它不处理外部链接。
• NavLink : 一个<NavLink>是一种特殊的 <Link>知道它是否“活跃”。

使用 Link或 NavLink当您需要链接到应用程序中的内部页面时。使用 Nav.Link来自 react-bootstrap 的组件组件 if 你已经在使用 react-bootstrap并且需要链接到外部或内部页面。

如果需要使用Nav.Link并链接到内部页面，然后传递 Link或 NavLink作为 component的 Nav.Link组件并传递适当的所需 Prop 。

外部示例:

<Nav.Link href="https://stackoverflow.com/questions/72091197/what-is-the-difference-between-nav-link-vs-link-vs-navlink-in-react-router-dom-a" >
  Some internal link
</Nav.Link>

内部示例:

<Nav.Link
  as={Link}
  to="/internalPage"
>
  Some internal link
</Nav.Link>

注意:如果使用 Link或 NavLink他们有一个不变的检查，要求他们在 react-router-dom 中使用由路由器提供的路由上下文。