Refactor: make more components cross compatible

SukkaW · SukkaW · commit 5ca8e8b3b6f0 · 2026-01-03T18:45:26.000+08:00
diff --git a/src/components/Layout/Feedback.tsx b/src/components/Layout/Feedback.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -10,14 +12,13 @@
  */
 
 import {useState} from 'react';
-import {useRouter} from 'next/router';
+import {usePathname} from 'next/navigation';
 import cn from 'classnames';
 
 export function Feedback({onSubmit = () => {}}: {onSubmit?: () => void}) {
-  const {asPath} = useRouter();
-  const cleanedPath = asPath.split(/[\?\#]/)[0];
+  const pathname = usePathname();
   // Reset on route changes.
-  return <SendFeedback key={cleanedPath} onSubmit={onSubmit} />;
+  return <SendFeedback key={pathname} onSubmit={onSubmit} />;
 }
 
 const thumbsUpIcon = (
diff --git a/src/components/Layout/Page.tsx b/src/components/Layout/Page.tsx
@@ -9,9 +9,11 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
+'use client';
+
 import {Suspense} from 'react';
 import * as React from 'react';
-import {useRouter} from 'next/router';
+import {useRouter} from 'next/compat/router';
 import {SidebarNav} from './SidebarNav';
 import {Footer} from './Footer';
 import {Toc} from './Toc';
@@ -28,6 +30,7 @@ import {HomeContent} from './HomeContent';
 import {TopNav} from './TopNav';
 import cn from 'classnames';
 import Head from 'next/head';
+import {usePathname} from 'next/navigation';
 
 import(/* webpackPrefetch: true */ '../MDX/CodeBlock/CodeBlock');
 
@@ -43,6 +46,8 @@ interface PageProps {
   };
   section: 'learn' | 'reference' | 'community' | 'blog' | 'home' | 'unknown';
   languages?: Languages | null;
+  /** Should this being used with the Next.js App Router? */
+  appRouter?: boolean;
 }
 
 export function Page({
@@ -52,9 +57,14 @@ export function Page({
   meta,
   section,
   languages = null,
+  appRouter = false,
 }: PageProps) {
-  const {asPath} = useRouter();
-  const cleanedPath = asPath.split(/[\?\#]/)[0];
+  const pagesRouter = useRouter();
+  const pathname = usePathname()!;
+  const cleanedPath = pagesRouter
+    ? pagesRouter.asPath.split(/[\?\#]/)[0]
+    : pathname;
+
   const {route, nextRoute, prevRoute, breadcrumbs, order} = getRouteMeta(
     cleanedPath,
     routeTree
@@ -125,13 +135,15 @@ export function Page({
 
   return (
     <>
-      <Seo
-        title={title}
-        titleForTitleTag={meta.titleForTitleTag}
-        isHomePage={isHomePage}
-        image={`/images/og-` + section + '.png'}
-        searchOrder={searchOrder}
-      />
+      {!appRouter && (
+        <Seo
+          title={title}
+          titleForTitleTag={meta.titleForTitleTag}
+          isHomePage={isHomePage}
+          image={`/images/og-` + section + '.png'}
+          searchOrder={searchOrder}
+        />
+      )}
       {(isHomePage || isBlogIndex) && (
         <Head>
           <link
@@ -169,7 +181,7 @@ export function Page({
           <main className="min-w-0 isolate">
             <article
               className="font-normal break-words text-primary dark:text-primary-dark"
-              key={asPath}>
+              key={cleanedPath}>
               {content}
             </article>
             <div
@@ -193,7 +205,9 @@ export function Page({
           </main>
         </Suspense>
         <div className="hidden -mt-16 lg:max-w-custom-xs 2xl:block">
-          {showToc && toc.length > 0 && <Toc headings={toc} key={asPath} />}
+          {showToc && toc.length > 0 && (
+            <Toc headings={toc} key={cleanedPath} />
+          )}
         </div>
       </div>
     </>
diff --git a/src/components/Layout/Sidebar/SidebarRouteTree.tsx b/src/components/Layout/Sidebar/SidebarRouteTree.tsx
@@ -12,12 +12,12 @@
 import {useRef, useLayoutEffect, Fragment} from 'react';
 
 import cn from 'classnames';
-import {useRouter} from 'next/router';
 import {SidebarLink} from './SidebarLink';
 import {useCollapse} from 'react-collapsed';
 import usePendingRoute from 'hooks/usePendingRoute';
 import type {RouteItem} from 'components/Layout/getRouteMeta';
 import {siteConfig} from 'siteConfig';
+import {usePathname} from 'next/navigation';
 
 interface SidebarRouteTreeProps {
   isForceExpanded: boolean;
@@ -84,7 +84,7 @@ export function SidebarRouteTree({
   routeTree,
   level = 0,
 }: SidebarRouteTreeProps) {
-  const slug = useRouter().asPath.split(/[\?\#]/)[0];
+  const slug = usePathname();
   const pendingRoute = usePendingRoute();
   const currentRoutes = routeTree.routes as RouteItem[];
   return (
diff --git a/src/components/MDX/ExpandableExample.tsx b/src/components/MDX/ExpandableExample.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -16,8 +18,20 @@ import {IconDeepDive} from '../Icon/IconDeepDive';
 import {IconCodeBlock} from '../Icon/IconCodeBlock';
 import {Button} from '../Button';
 import {H4} from './Heading';
-import {useRouter} from 'next/router';
-import {useEffect, useRef, useState} from 'react';
+import {useEffect, useRef, useState, useSyncExternalStore} from 'react';
+
+function useHash() {
+  return useSyncExternalStore(
+    (callback) => {
+      window.addEventListener('hashchange', callback);
+      return () => {
+        window.removeEventListener('hashchange', callback);
+      };
+    },
+    () => window.location.hash,
+    () => null
+  );
+}
 
 interface ExpandableExampleProps {
   children: React.ReactNode;
@@ -35,8 +49,8 @@ function ExpandableExample({children, excerpt, type}: ExpandableExampleProps) {
   const isExample = type === 'Example';
   const id = children[0].props.id;
 
-  const {asPath} = useRouter();
-  const shouldAutoExpand = id === asPath.split('#')[1];
+  const hash = useHash();
+  const shouldAutoExpand = !!hash && id === hash.split('#')[1];
   const queuedExpandRef = useRef<boolean>(shouldAutoExpand);
   const [isExpanded, setIsExpanded] = useState(false);
 
