refactor(v2): use nav link component only where needed (#2585)

packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js

@@ -76,6 +76,7 @@ function DocSidebarItem({item, onItemClick, collapsible}) {
             to={href}
             {...(isInternalUrl(href)
               ? {
+                  isNavLink: true,
                   activeClassName: 'menu__link--active',
                   exact: true,
                   onClick: onItemClick,

packages/docusaurus-theme-classic/src/theme/Navbar/index.js

@@ -33,6 +33,7 @@ function NavLink({activeBasePath, to, href, label, position, ...props}) {
             href,
           }
         : {
+            isNavLink: true,
             activeClassName: 'navbar__link--active',
             to: toUrl,
             ...(activeBasePath

packages/docusaurus/src/client/exports/Link.js

@@ -6,15 +6,16 @@
  */
 
 import React, {useEffect, useRef} from 'react';
-import {NavLink} from 'react-router-dom';
+import {NavLink, Link as RRLink} from 'react-router-dom';
 import isInternalUrl from '@docusaurus/isInternalUrl';
 import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
 
-function Link(props) {
+function Link({isNavLink, ...props}) {
   const {to, href} = props;
   const targetLink = to || href;
   const isInternal = isInternalUrl(targetLink);
   const preloaded = useRef(false);
+  const LinkComponent = isNavLink ? NavLink : RRLink;
 
   const IOSupported = ExecutionEnvironment.canUseIntersectionObserver;
 
@@ -72,7 +73,7 @@ function Link(props) {
     // eslint-disable-next-line jsx-a11y/anchor-has-content
     <a {...props} href={targetLink} />
   ) : (
-    <NavLink
+    <LinkComponent
       {...props}
       onMouseEnter={onMouseEnter}
       innerRef={handleRef}

website/docs/docusaurus-core.md

@@ -61,7 +61,7 @@ Outputs
 
 This component enables linking to internal pages as well as a powerful performance feature called preloading. Preloading is used to prefetch resources so that the resources are fetched by the time the user navigates with this component. We use an `IntersectionObserver` to fetch a low-priority request when the `<Link>` is in the viewport and then use an `onMouseOver` event to trigger a high-priority request when it is likely that a user will navigate to the requested resource.
 
-The component is a wrapper around react-router’s `<NavLink>` component that adds useful enhancements specific to Docusaurus. All props are passed through to react-router’s `<NavLink>` component.
+The component is a wrapper around react-router’s `<Link>` component that adds useful enhancements specific to Docusaurus. All props are passed through to react-router’s `<Link>` component.
 
 ```jsx {2,7}
 import React from 'react';
@@ -88,16 +88,6 @@ The target location to navigate to. Example: `/docs/introduction`.
 <Link to="/courses" />
 ```
 
-#### `activeClassName`: string
-
-The class to give the `<Link>` when it is active. The default given class is `active`. This will be joined with the `className` prop.
-
-```jsx {1}
-<Link to="/faq" activeClassName="selected">
-  FAQs
-</Link>
-```
-
 ### `<Redirect/>`
 
 Rendering a `<Redirect>` will navigate to a new location. The new location will override the current location in the history stack, like server-side redirects (HTTP 3xx) do. You can refer to [React Router's Redirect documentation](https://reacttraining.com/react-router/web/api/Redirect) for more info on available props.