diff --git a/src/components/EditThis.tsx b/src/components/EditThis.tsx
new file mode 100644
index 00000000000..7dbbd8540b2
--- /dev/null
+++ b/src/components/EditThis.tsx
@@ -0,0 +1,30 @@
+import {useRouter} from 'next/router';
+import {ExternalLink} from './ExternalLink';
+import {IconGitHub} from './Icon/IconGitHub';
+import {ReactElement} from 'react';
+
+const githubBranch = 'main';
+const baseGithubLink = `https://github.com/reactjs/react.dev/edit/${githubBranch}/`;
+
+type EditThisProps = {
+ path: string;
+ isIndexPage: boolean;
+};
+
+export const EditThis = ({path, isIndexPage}: EditThisProps): ReactElement => {
+ const {asPath} = useRouter();
+ const pathParts = asPath.split(/[\?\#]/)[0].split('/');
+ const pageToEdit = isIndexPage ? 'index' : pathParts[pathParts.length - 1];
+
+ return (
+
+
+
+
+ Edit this page on Github
+
+
+
+ );
+};
diff --git a/src/components/Layout/Page.tsx b/src/components/Layout/Page.tsx
index 24d379589de..45435b10832 100644
--- a/src/components/Layout/Page.tsx
+++ b/src/components/Layout/Page.tsx
@@ -21,6 +21,7 @@ import {HomeContent} from './HomeContent';
import {TopNav} from './TopNav';
import cn from 'classnames';
import Head from 'next/head';
+import {EditThis} from 'components/EditThis';
import(/* webpackPrefetch: true */ '../MDX/CodeBlock/CodeBlock');
@@ -57,6 +58,7 @@ export function Page({
const description = meta.description || route?.description || '';
const isHomePage = cleanedPath === '/';
const isBlogIndex = cleanedPath === '/blog';
+ const isReferencePage = cleanedPath.startsWith('/reference');
let content;
if (isHomePage) {
@@ -88,6 +90,16 @@ export function Page({
+ {isReferencePage && route && (
+
+ el.path?.startsWith(route.path!)
+ )?.path === route.path
+ }
+ path={route?.path || routeTree.path || ''}
+ />
+ )}
{!isBlogIndex && (