Merge pull request #2331 from dxc-technology/Mil4n0r/fix_routing_problem

Reformated routing code in doc

Author: PelayoFelgueroso

apps/website/pages/_app.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode, useEffect, useMemo, useState } from "react";
+import { ReactElement, ReactNode, useMemo, useState } from "react";
 import type { NextPage } from "next";
 import type { AppProps } from "next/app";
 import Head from "next/head";
@@ -10,7 +10,6 @@ import StatusBadge from "@/common/StatusBadge";
 import "../global-styles.css";
 import createCache, { EmotionCache } from "@emotion/cache";
 import { CacheProvider } from "@emotion/react";
-import { usePathname } from "next/navigation";
 import Link from "next/link";
 import { GroupItem, Item, Section } from "../../../packages/lib/src/base-menu/types";
 import { isGroupItem } from "../../../packages/lib/src/base-menu/utils";
@@ -29,10 +28,9 @@ const clientSideEmotionCache = createCache({ key: "css", prepend: true });
 export default function App({ Component, pageProps, emotionCache = clientSideEmotionCache }: AppPropsWithLayout) {
   const getLayout = Component.getLayout || ((page) => page);
   const componentWithLayout = getLayout(<Component {...pageProps} />);
-  const router = useRouter();
-  const pathname = usePathname();
   const [filter, setFilter] = useState("");
   const [isExpanded, setIsExpanded] = useState(true);
+  const { asPath: currentPath } = useRouter();
 
   const filterSections = (sections: Section[], query: string): Section[] => {
     const q = query.trim().toLowerCase();
@@ -66,7 +64,7 @@ export default function App({ Component, pageProps, emotionCache = clientSideEmo
   const mapLinksToGroupItems = (sections: LinksSectionDetails[]): Section[] => {
     const matchPaths = (linkPath: string) => {
       const desiredPaths = [linkPath, `${linkPath}/code`];
-      const pathToBeMatched = pathname?.split("#")[0]?.slice(0, -1);
+      const pathToBeMatched = currentPath?.split("#")[0]?.slice(0, -1);
       return pathToBeMatched ? desiredPaths.includes(pathToBeMatched) : false;
     };
 
@@ -88,16 +86,6 @@ export default function App({ Component, pageProps, emotionCache = clientSideEmo
     }));
   };
 
-  useEffect(() => {
-    const paths = [...new Set(LinksSections.flatMap((s) => s.links.map((l) => l.path)))];
-    const prefetchPaths = async () => {
-      for (const path of paths) {
-        await router.prefetch(path);
-      }
-    };
-    void prefetchPaths();
-  }, []);
-
   // TODO: ADD NEW CATEGORIZATION
 
   const filteredSections = useMemo(() => {