fix(ui): preserve the current page in translation links

src/components/Layout/TopNav/TopNav.tsx

@@ -169,6 +169,12 @@ export default function TopNav({
   const [isScrolled, setIsScrolled] = useState(false);
   const scrollParentRef = useRef<HTMLDivElement>(null);
   const {asPath} = useRouter();
+  const translationsHref =
+    section === 'learn' || section === 'reference'
+      ? `/community/translations?from=${encodeURIComponent(
+          asPath.split(/[?#]/)[0]
+        )}`
+      : '/community/translations';
 
   // HACK. Fix up the data structures instead.
   if ((routeTree as any).routes.length === 1) {
@@ -378,7 +384,7 @@ export default function TopNav({
                 </div>
                 <div className="flex">
                   <Link
-                    href="/community/translations"
+                    href={translationsHref}
                     aria-label="Translations"
                     className="active:scale-95 transition-transform flex w-12 h-12 rounded-full items-center justify-center hover:bg-primary/5 hover:dark:bg-primary-dark/5 outline-link">
                     {languageIcon}

src/components/MDX/MDXComponents.tsx

@@ -12,6 +12,7 @@
 import {Children, useContext, useMemo} from 'react';
 import * as React from 'react';
 import cn from 'classnames';
+import {useRouter} from 'next/router';
 import type {HTMLAttributes} from 'react';
 
 import CodeBlock from './CodeBlock';
@@ -41,6 +42,7 @@ import type {Toc, TocItem} from './TocContext';
 import {TeamMember} from './TeamMember';
 import {LanguagesContext} from './LanguagesContext';
 import {finishedTranslations} from 'utils/finishedTranslations';
+import {ExternalLink} from 'components/ExternalLink';
 
 import ErrorDecoder from './ErrorDecoder';
 import {IconCanary} from '../Icon/IconCanary';
@@ -469,6 +471,9 @@ function InlineTocItem({items}: {items: Array<NestedTocNode>}) {
 type TranslationProgress = 'complete' | 'in-progress';
 
 function LanguageList({progress}: {progress: TranslationProgress}) {
+  const from = useRouter().query.from;
+  const pathname =
+    typeof from === 'string' && /^\/(?!\/)[^\\?#]*$/.test(from) ? from : '';
   const allLanguages = React.useContext(LanguagesContext) ?? [];
   const languages = allLanguages
     .filter(
@@ -482,11 +487,19 @@ function LanguageList({progress}: {progress: TranslationProgress}) {
   return (
     <UL>
       {languages.map(({code, name, enName}) => {
+        const href =
+          progress === 'complete' && pathname
+            ? `/api/translation?language=${encodeURIComponent(
+                code
+              )}&from=${encodeURIComponent(pathname)}`
+            : `https://${code}.react.dev/`;
         return (
           <LI key={code}>
-            <Link href={`https://${code}.react.dev/`}>
+            <ExternalLink
+              href={href}
+              className="inline text-link dark:text-link-dark border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal">
               {enName} ({name})
-            </Link>{' '}
+            </ExternalLink>{' '}
             &mdash;{' '}
             <Link href={`https://github.com/reactjs/${code}.react.dev`}>
               Contribute

src/pages/api/translation.ts

@@ -0,0 +1,59 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import type {NextApiRequest, NextApiResponse} from 'next';
+import {finishedTranslations} from 'utils/finishedTranslations';
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  if (req.method !== 'GET') {
+    res.status(405).end();
+    return;
+  }
+
+  const {language, from} = req.query;
+  if (
+    typeof language !== 'string' ||
+    language === 'en' ||
+    !finishedTranslations.includes(language)
+  ) {
+    res.status(404).end();
+    return;
+  }
+
+  const homepage = `https://${language}.react.dev/`;
+  if (
+    typeof from !== 'string' ||
+    !/^\/(?!\/)(?:learn|reference)(?:\/|$)[^\\?#]*$/.test(from)
+  ) {
+    res.redirect(302, homepage);
+    return;
+  }
+
+  const translatedPage = new URL(from, homepage).toString();
+  const controller = new AbortController();
+  const timeout = setTimeout(() => controller.abort(), 2000);
+
+  try {
+    const response = await fetch(translatedPage, {
+      method: 'HEAD',
+      signal: controller.signal,
+    });
+    if (response.ok) {
+      res.redirect(302, translatedPage);
+      return;
+    }
+  } catch {
+    // Keep the original homepage behavior when the translation site is unavailable.
+  } finally {
+    clearTimeout(timeout);
+  }
+
+  res.redirect(302, homepage);
+}