diff --git a/packages/docusaurus/src/client/exports/Link.tsx b/packages/docusaurus/src/client/exports/Link.tsx
index 5f85cdff18..328edd8133 100644
--- a/packages/docusaurus/src/client/exports/Link.tsx
+++ b/packages/docusaurus/src/client/exports/Link.tsx
@@ -11,6 +11,7 @@ import {NavLink, Link as RRLink} from 'react-router-dom';
 import isInternalUrl from './isInternalUrl';
 import ExecutionEnvironment from './ExecutionEnvironment';
 import {useLinksCollector} from '../LinksCollector';
+import {useBaseUrlUtils} from './useBaseUrl';
 
 declare global {
   interface Window {
@@ -29,6 +30,13 @@ interface Props {
   readonly 'data-noBrokenLinkCheck'?: boolean;
 }
 
+// TODO all this wouldn't be necessary if we used ReactRouter basename feature
+// We don't automatically add base urls to all links,
+// only the "safe" ones, starting with / (like /docs/introduction)
+// this is because useBaseUrl() actually transforms relative links
+// like "introduction" to "/baseUrl/introduction" => bad behavior to fix
+const shouldAddBaseUrlAutomatically = (to: string) => to.startsWith('/');
+
 function Link({
   isNavLink,
   to,
@@ -37,13 +45,27 @@ function Link({
   'data-noBrokenLinkCheck': noBrokenLinkCheck,
   ...props
 }: Props): JSX.Element {
+  const {withBaseUrl} = useBaseUrlUtils();
   const linksCollector = useLinksCollector();
 
   // IMPORTANT: using to or href should not change anything
   // For example, MDX links will ALWAYS give us the href props
   // Using one prop or the other should not be used to distinguish
   // internal links (/docs/myDoc) from external links (https://github.com)
-  const targetLink = to || href;
+  const targetLinkUnprefixed = to || href;
+
+  function maybeAddBaseUrl(str: string) {
+    return shouldAddBaseUrlAutomatically(str)
+      ? withBaseUrl(str)
+      : targetLinkUnprefixed;
+  }
+
+  // TODO we should use ReactRouter basename feature instead!
+  // Automatically apply base url in links that start with /
+  const targetLink =
+    typeof targetLinkUnprefixed !== 'undefined'
+      ? maybeAddBaseUrl(targetLinkUnprefixed)
+      : undefined;
 
   const isInternal = isInternalUrl(targetLink);
   const preloaded = useRef(false);
diff --git a/website/docs/search.md b/website/docs/search.md
index 70867aa519..8e99c8afbe 100644
--- a/website/docs/search.md
+++ b/website/docs/search.md
@@ -44,7 +44,7 @@ The `searchParameters` option used to be named `algoliaOptions` in Docusaurus v1
 
 By default, DocSearch comes with a fine-tuned theme that was designed for accessibility, making sure that colors and contrasts respect standards.
 
-Still, you can reuse the [Infima CSS variables](/docs/styling-layout/#styling-your-site-with-infima) from Docusaurus to style DocSearch by editing the `/src/css/custom.css` file.
+Still, you can reuse the [Infima CSS variables](styling-layout#styling-your-site-with-infima) from Docusaurus to style DocSearch by editing the `/src/css/custom.css` file.
 
 ```css title="/src/css/custom.css"
 html[data-theme='light'] .DocSearch {
diff --git a/website/versioned_docs/version-2.0.0-alpha.59/search.md b/website/versioned_docs/version-2.0.0-alpha.59/search.md
index 70867aa519..8e99c8afbe 100644
--- a/website/versioned_docs/version-2.0.0-alpha.59/search.md
+++ b/website/versioned_docs/version-2.0.0-alpha.59/search.md
@@ -44,7 +44,7 @@ The `searchParameters` option used to be named `algoliaOptions` in Docusaurus v1
 
 By default, DocSearch comes with a fine-tuned theme that was designed for accessibility, making sure that colors and contrasts respect standards.
 
-Still, you can reuse the [Infima CSS variables](/docs/styling-layout/#styling-your-site-with-infima) from Docusaurus to style DocSearch by editing the `/src/css/custom.css` file.
+Still, you can reuse the [Infima CSS variables](styling-layout#styling-your-site-with-infima) from Docusaurus to style DocSearch by editing the `/src/css/custom.css` file.
 
 ```css title="/src/css/custom.css"
 html[data-theme='light'] .DocSearch {