make page not refresh when changing pagination page

src/components/player/GlobalRanking.tsx

@@ -5,7 +5,6 @@ import { ScoreSaberAPI } from "@/utils/scoresaber/api";
 import { normalizedRegionName } from "@/utils/utils";
 import dynamic from "next/dynamic";
 import Link from "next/link";
-import { useRouter } from "next/navigation";
 import { useCallback, useEffect, useState } from "react";
 import Card from "../Card";
 import Container from "../Container";
@@ -30,8 +29,6 @@ type GlobalRankingProps = {
 };
 
 export default function GlobalRanking({ page, country }: GlobalRankingProps) {
-  const router = useRouter();
-
   const [error, setError] = useState(false);
   const [errorMessage, setErrorMessage] = useState("");
 
@@ -59,14 +56,16 @@ export default function GlobalRanking({ page, country }: GlobalRankingProps) {
           loading: false,
           page: page,
         });
-        router.push(
+        window.history.pushState(
+          {},
+          "",
           country
             ? `/ranking/country/${country}/${page}`
             : `/ranking/global/${page}`,
         );
       });
     },
-    [country, pageInfo, router],
+    [country, pageInfo],
   );
 
   useEffect(() => {
@@ -151,7 +150,7 @@ export default function GlobalRanking({ page, country }: GlobalRankingProps) {
                     key={player.rank}
                     className="flex flex-col gap-2 rounded-md bg-gray-700 hover:bg-gray-600"
                   >
-                    <Link href={`/player/${player.id}`}>
+                    <Link href={`/player/${player.id}/top/1`}>
                       <PlayerRankingMobile player={player} />
                     </Link>
                   </div>

src/components/player/PlayerRanking.tsx

@@ -33,7 +33,7 @@ export default function PlayerRanking({
         )}
         <Link
           className="transform-gpu transition-all hover:text-blue-500"
-          href={"/player/" + player.id}
+          href={`/player/${player.id}/top/1`}
         >
           <p
             className={

src/components/player/Scores.tsx

@@ -5,7 +5,6 @@ import { SortType, SortTypes } from "@/types/SortTypes";
 import { ScoreSaberAPI } from "@/utils/scoresaber/api";
 import useStore from "@/utils/useStore";
 import dynamic from "next/dynamic";
-import { useRouter } from "next/navigation";
 import { useCallback, useEffect, useState } from "react";
 import Card from "../Card";
 import Error from "../Error";
@@ -32,8 +31,6 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
   const settingsStore = useStore(useSettingsStore, (store) => store);
   const playerId = playerData.id;
 
-  const router = useRouter();
-
   const [mounted, setMounted] = useState(false);
   const [error, setError] = useState(false);
   const [errorMessage, setErrorMessage] = useState("");
@@ -65,16 +62,17 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
             sortType: sortType,
           });
           settingsStore?.setLastUsedSortType(sortType);
-
-          router.push(`/player/${playerId}/${sortType.value}/${page}`, {
-            scroll: false,
-          });
+          window.history.pushState(
+            {},
+            "",
+            `/player/${playerId}/${sortType.value}/${page}`,
+          );
 
           console.log(`Switched page to ${page} with sort ${sortType.value}`);
         },
       );
     },
-    [playerId, router, scores, settingsStore],
+    [playerId, scores, settingsStore],
   );
 
   useEffect(() => {