What is the difference between Nav.Link vs Link vs NavLink in react router DOM and react bootstrap?

Question

I am confused about these three Links, what are the different ways to use them?

• Nav.Link
• Link
• NavLink i

Do they have different use cases?

Answer 1

• Nav.Link: The Nav.Link component is maintained by react-bootstrap and returns an anchor (<a />) tag by default.
• Link: Is a specialized anchor (<a />) tag that link specifically to internal routes maintained by a react-router/react-router-dom router component. It does not handle external links.
• NavLink: A <NavLink> is a special kind of <Link> that knows whether or not it is "active".

Use the Link or NavLink components when you need to link to internal pages in your app. Use the Nav.Link component from react-bootstrap component if you are already using react-bootstrap and need to link to external or internal pages.

If you need to use Nav.Link and link to internal pages then pass Link or NavLink as the component of the Nav.Link component and pass the appropriate required props through.

External Example:

<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>

Internal Example:

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

Note: If using Link or NavLink they have an invariant check that requires them to be used within a react-router-dom routing context provided by a router.