gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-05 04:30:19 28 4
gpt4 key购买 nike

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

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

它们有不同的用例吗?

最佳答案

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

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

如果需要使用Nav.Link并链接到内部页面,然后传递 LinkNavLink作为 componentNav.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>

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

关于reactjs - 在 react 路由器 DOM 和 react Bootstrap 中,Nav.Link vs Link vs NavLink 有什么区别?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/72091197/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com