From 9c1abcddab182073efdd2af24519ad60f5baece3 Mon Sep 17 00:00:00 2001
From: Alexey Pyltsyn <lex61rus@gmail.com>
Date: Sun, 12 Apr 2020 08:34:50 +0300
Subject: [PATCH] refactor(v2): use nav link component only where needed
 (#2585)

---
 .../src/theme/DocSidebar/index.js                    |  1 +
 .../src/theme/Navbar/index.js                        |  1 +
 packages/docusaurus/src/client/exports/Link.js       |  7 ++++---
 website/docs/docusaurus-core.md                      | 12 +-----------
 4 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js b/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js
index dbd3d4fe5d..a230fb6a1d 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js
+++ b/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,
diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/index.js b/packages/docusaurus-theme-classic/src/theme/Navbar/index.js
index 6d36b28a68..70ca66527d 100644
--- a/packages/docusaurus-theme-classic/src/theme/Navbar/index.js
+++ b/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
diff --git a/packages/docusaurus/src/client/exports/Link.js b/packages/docusaurus/src/client/exports/Link.js
index 749c5b1d7d..f3a978f7ff 100644
--- a/packages/docusaurus/src/client/exports/Link.js
+++ b/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}
diff --git a/website/docs/docusaurus-core.md b/website/docs/docusaurus-core.md
index 9fb4a54a2f..a07f1a1682 100644
--- a/website/docs/docusaurus-core.md
+++ b/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.