React router DOM 和 React bootstrap 中的 Nav.Link vs Link vs NavLink 有什么区别？

Question

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

• 导航链接
• 关联
• 导航链接我

他们有不同的用例吗？

Answer 1

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

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

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

外部示例：

<Nav.Link href="/sf/ask/5046383821/" >
  Some internal link
</Nav.Link>

内部示例：

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

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