Fix broken MDX doc links

Author: feedthejim

src/components/MDX/Link.tsx

@@ -16,6 +16,31 @@ import cn from 'classnames';
 import {ExternalLink} from 'components/ExternalLink';
 import {getMDXName} from './getMDXName';
 
+const ABSOLUTE_DOC_SECTIONS = [
+  'blog',
+  'community',
+  'errors',
+  'learn',
+  'reference',
+] as const;
+
+function normalizeDocsHref(href: string) {
+  if (
+    href.startsWith('/') ||
+    href.startsWith('#') ||
+    href.startsWith('./') ||
+    href.startsWith('../')
+  ) {
+    return href;
+  }
+
+  const matchesDocsPath = ABSOLUTE_DOC_SECTIONS.some(
+    (section) => href === section || href.startsWith(`${section}/`)
+  );
+
+  return matchesDocsPath ? `/${href}` : href;
+}
+
 function Link({
   href,
   className,
@@ -36,18 +61,27 @@ function Link({
   if (!href) {
     return <a href={href} className={className} {...props} />;
   }
+
+  const normalizedHref = normalizeDocsHref(href);
+
   return (
     <>
-      {href.startsWith('https://') ? (
-        <ExternalLink href={href} className={cn(classes, className)} {...props}>
+      {normalizedHref.startsWith('https://') ? (
+        <ExternalLink
+          href={normalizedHref}
+          className={cn(classes, className)}
+          {...props}>
           {modifiedChildren}
         </ExternalLink>
-      ) : href.startsWith('#') ? (
-        <a className={cn(classes, className)} href={href} {...props}>
+      ) : normalizedHref.startsWith('#') ? (
+        <a className={cn(classes, className)} href={normalizedHref} {...props}>
           {modifiedChildren}
         </a>
       ) : (
-        <NextLink href={href} className={cn(classes, className)} {...props}>
+        <NextLink
+          href={normalizedHref}
+          className={cn(classes, className)}
+          {...props}>
           {modifiedChildren}
         </NextLink>
       )}

src/content/learn/preserving-and-resetting-state.md

@@ -18,7 +18,7 @@ State is isolated between components. React keeps track of which state belongs t
 
 ## State is tied to a position in the render tree {/*state-is-tied-to-a-position-in-the-tree*/}
 
-React builds [render trees](learn/understanding-your-ui-as-a-tree#the-render-tree) for the component structure in your UI.
+React builds [render trees](/learn/understanding-your-ui-as-a-tree#the-render-tree) for the component structure in your UI.
 
 When you give a component state, you might think the state "lives" inside the component. But the state is actually held inside React. React associates each piece of state it's holding with the correct component by where that component sits in the render tree.
 

src/content/learn/react-compiler/introduction.md

@@ -144,7 +144,7 @@ However, if `expensivelyProcessAReallyLargeArrayOfObjects` is truly an expensive
 - React Compiler only memoizes React components and hooks, not every function
 - React Compiler's memoization is not shared across multiple components or hooks
 
-So if `expensivelyProcessAReallyLargeArrayOfObjects` was used in many different components, even if the same exact items were passed down, that expensive calculation would be run repeatedly. We recommend [profiling](reference/react/useMemo#how-to-tell-if-a-calculation-is-expensive) first to see if it really is that expensive before making code more complicated.
+So if `expensivelyProcessAReallyLargeArrayOfObjects` was used in many different components, even if the same exact items were passed down, that expensive calculation would be run repeatedly. We recommend [profiling](/reference/react/useMemo#how-to-tell-if-a-calculation-is-expensive) first to see if it really is that expensive before making code more complicated.
 </DeepDive>
 
 ## Should I try out the compiler? {/*should-i-try-out-the-compiler*/}
@@ -188,4 +188,3 @@ This section will help you get started with React Compiler and understand how to
 ## Additional resources {/*additional-resources*/}
 
 In addition to these docs, we recommend checking the [React Compiler Working Group](https://github.com/reactwg/react-compiler) for additional information and discussion about the compiler.
-

src/content/learn/setup.md

@@ -17,7 +17,7 @@ TypeScript is a popular way to add type definitions to JavaScript codebases. [Le
 
 ## React Developer Tools {/*react-developer-tools*/}
 
-React Developer Tools is a browser extension that can inspect React components, edit props and state, and identify performance problems. Learn how to install it [here](learn/react-developer-tools).
+React Developer Tools is a browser extension that can inspect React components, edit props and state, and identify performance problems. Learn how to install it [here](/learn/react-developer-tools).
 
 ## React Compiler {/*react-compiler*/}
 

src/content/learn/understanding-your-ui-as-a-tree.md

@@ -135,7 +135,7 @@ The root node in a React render tree is the [root component](/learn/importing-an
 
 #### Where are the HTML tags in the render tree? {/*where-are-the-html-elements-in-the-render-tree*/}
 
-You'll notice in the above render tree, there is no mention of the HTML tags that each component renders. This is because the render tree is only composed of React [components](learn/your-first-component#components-ui-building-blocks).
+You'll notice in the above render tree, there is no mention of the HTML tags that each component renders. This is because the render tree is only composed of React [components](/learn/your-first-component#components-ui-building-blocks).
 
 React, as a UI framework, is platform agnostic. On react.dev, we showcase examples that render to the web, which uses HTML markup as its UI primitives. But a React app could just as likely render to a mobile or desktop platform, which may use different UI primitives like [UIView](https://developer.apple.com/documentation/uikit/uiview) or [FrameworkElement](https://learn.microsoft.com/en-us/dotnet/api/system.windows.frameworkelement?view=windowsdesktop-7.0).
 

src/content/reference/react-dom/index.md

@@ -48,6 +48,6 @@ These APIs were removed in React 19:
 * [`findDOMNode`](https://18.react.dev/reference/react-dom/findDOMNode): see [alternatives](https://18.react.dev/reference/react-dom/findDOMNode#alternatives).
 * [`hydrate`](https://18.react.dev/reference/react-dom/hydrate): use [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) instead.
 * [`render`](https://18.react.dev/reference/react-dom/render): use [`createRoot`](/reference/react-dom/client/createRoot) instead.
-* [`unmountComponentAtNode`](/reference/react-dom/unmountComponentAtNode): use [`root.unmount()`](/reference/react-dom/client/createRoot#root-unmount) instead.
+* `unmountComponentAtNode`: use [`root.unmount()`](/reference/react-dom/client/createRoot#root-unmount) instead.
 * [`renderToNodeStream`](https://18.react.dev/reference/react-dom/server/renderToNodeStream): use [`react-dom/server`](/reference/react-dom/server) APIs instead.
 * [`renderToStaticNodeStream`](https://18.react.dev/reference/react-dom/server/renderToStaticNodeStream): use [`react-dom/server`](/reference/react-dom/server) APIs instead.

src/content/reference/react/cache.md

@@ -370,7 +370,7 @@ At this time, `cache` should only be used in Server Components and the cache wil
 
 #### `memo` {/*deep-dive-memo*/}
 
-You should use [`memo`](reference/react/memo) to prevent a component re-rendering if its props are unchanged.
+You should use [`memo`](/reference/react/memo) to prevent a component re-rendering if its props are unchanged.
 
 ```js
 'use client';

src/content/reference/react/useOptimistic.md

@@ -51,7 +51,7 @@ function MyComponent({name, todos}) {
 
 ### `set` functions, like `setOptimistic(optimisticState)` {/*setoptimistic*/}
 
-The `set` function returned by `useOptimistic` lets you update the state for the duration of an [Action](reference/react/useTransition#functions-called-in-starttransition-are-called-actions). You can pass the next state directly, or a function that calculates it from the previous state:
+The `set` function returned by `useOptimistic` lets you update the state for the duration of an [Action](/reference/react/useTransition#functions-called-in-starttransition-are-called-actions). You can pass the next state directly, or a function that calculates it from the previous state:
 
 ```js
 const [optimisticLike, setOptimisticLike] = useOptimistic(false);
@@ -68,7 +68,7 @@ function handleClick() {
 
 #### Parameters {/*setoptimistic-parameters*/}
 
-* `optimisticState`: The value that you want the optimistic state to be during an [Action](reference/react/useTransition#functions-called-in-starttransition-are-called-actions). If you provided a `reducer` to `useOptimistic`, this value will be passed as the second argument to your reducer. It can be a value of any type.
+* `optimisticState`: The value that you want the optimistic state to be during an [Action](/reference/react/useTransition#functions-called-in-starttransition-are-called-actions). If you provided a `reducer` to `useOptimistic`, this value will be passed as the second argument to your reducer. It can be a value of any type.
     * If you pass a function as `optimisticState`, it will be treated as an _updater function_. It must be pure, should take the pending state as its only argument, and should return the next optimistic state. React will put your updater function in a queue and re-render your component. During the next render, React will calculate the next state by applying the queued updaters to the previous state similar to [`useState` updaters](/reference/react/useState#setstate-parameters).
 
 #### Returns {/*setoptimistic-returns*/}
@@ -77,7 +77,7 @@ function handleClick() {
 
 #### Caveats {/*setoptimistic-caveats*/}
 
-* The `set` function must be called inside an [Action](reference/react/useTransition#functions-called-in-starttransition-are-called-actions). If you call the setter outside an Action, [React will show a warning](#an-optimistic-state-update-occurred-outside-a-transition-or-action) and the optimistic state will briefly render.
+* The `set` function must be called inside an [Action](/reference/react/useTransition#functions-called-in-starttransition-are-called-actions). If you call the setter outside an Action, [React will show a warning](#an-optimistic-state-update-occurred-outside-a-transition-or-action) and the optimistic state will briefly render.
 
 <DeepDive>
 
@@ -161,7 +161,7 @@ function MyComponent({age, name, todos}) {
 `useOptimistic` returns an array with exactly two items:
 
 1. The <CodeStep step={2}>optimistic state</CodeStep>, initially set to the <CodeStep step={1}>value</CodeStep> provided.
-2. The <CodeStep step={3}>set function</CodeStep> that lets you temporarily change the state during an [Action](reference/react/useTransition#functions-called-in-starttransition-are-called-actions).
+2. The <CodeStep step={3}>set function</CodeStep> that lets you temporarily change the state during an [Action](/reference/react/useTransition#functions-called-in-starttransition-are-called-actions).
    * If a <CodeStep step={4}>reducer</CodeStep> is provided, it will run before returning the optimistic state.
 
 To use the <CodeStep step={2}>optimistic state</CodeStep>, call the `set` function inside an Action. 

src/content/reference/rules/components-and-hooks-must-be-pure.md

@@ -70,7 +70,7 @@ function Dropdown() {
 
 ## Components and Hooks must be idempotent {/*components-and-hooks-must-be-idempotent*/}
 
-Components must always return the same output with respect to their inputs – props, state, and context. This is known as _idempotency_. [Idempotency](https://en.wikipedia.org/wiki/Idempotence) is a term popularized in functional programming. It refers to the idea that you [always get the same result every time](learn/keeping-components-pure) you run that piece of code with the same inputs.
+Components must always return the same output with respect to their inputs – props, state, and context. This is known as _idempotency_. [Idempotency](https://en.wikipedia.org/wiki/Idempotence) is a term popularized in functional programming. It refers to the idea that you [always get the same result every time](/learn/keeping-components-pure) you run that piece of code with the same inputs.
 
 This means that _all_ code that runs [during render](#how-does-react-run-your-code) must also be idempotent in order for this rule to hold. For example, this line of code is not idempotent (and therefore, neither is the component):
 
@@ -132,7 +132,7 @@ Side effects are a broader term than Effects. Effects specifically refer to code
 Side effects are typically written inside of [event handlers](/learn/responding-to-events) or Effects. But never during render.
 </Note>
 
-While render must be kept pure, side effects are necessary at some point in order for your app to do anything interesting, like showing something on the screen! The key point of this rule is that side effects should not run [in render](#how-does-react-run-your-code), as React can render components multiple times. In most cases, you'll use [event handlers](learn/responding-to-events) to handle side effects. Using an event handler explicitly tells React that this code doesn't need to run during render, keeping render pure. If you've exhausted all options – and only as a last resort – you can also handle side effects using `useEffect`.
+While render must be kept pure, side effects are necessary at some point in order for your app to do anything interesting, like showing something on the screen! The key point of this rule is that side effects should not run [in render](#how-does-react-run-your-code), as React can render components multiple times. In most cases, you'll use [event handlers](/learn/responding-to-events) to handle side effects. Using an event handler explicitly tells React that this code doesn't need to run during render, keeping render pure. If you've exhausted all options – and only as a last resort – you can also handle side effects using `useEffect`.
 
 ### When is it okay to have mutation? {/*mutation*/}
 
@@ -202,7 +202,7 @@ As long as calling a component multiple times is safe and doesn’t affect the r
 
 ## Props and state are immutable {/*props-and-state-are-immutable*/}
 
-A component's props and state are immutable [snapshots](learn/state-as-a-snapshot). Never mutate them directly. Instead, pass new props down, and use the setter function from `useState`.
+A component's props and state are immutable [snapshots](/learn/state-as-a-snapshot). Never mutate them directly. Instead, pass new props down, and use the setter function from `useState`.
 
 You can think of the props and state values as snapshots that are updated after rendering. For this reason, you don't modify the props or state variables directly: instead you pass new props, or use the setter function provided to you to tell React that state needs to update the next time the component is rendered.