feat: useRouter().pathname → usePathname() (#928)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: frano-m

src/hooks/stateSyncManager/hooks/UseStateSync/hook.ts

@@ -1,3 +1,4 @@
+import { usePathname } from "next/navigation";
 import { NextRouter, useRouter } from "next/router";
 import { useEffect } from "react";
 import { ROUTER_METHOD } from "../../../../providers/exploreState/actions/stateToUrl/types";
@@ -10,7 +11,8 @@ export const useStateSync = <Action>({
   dispatch,
   state,
 }: UseStateSyncManagerProps<Action>): void => {
-  const { basePath, isReady, pathname, query } = useRouter();
+  const { basePath, isReady, query } = useRouter();
+  const pathname = usePathname() ?? "";
   const { onClearPopRef, popRef } = useWasPop();
 
   // Extract the query from the state.

src/hooks/useUpdateURLCatalogParam.ts

@@ -7,6 +7,14 @@ import { useExploreState } from "./useExploreState";
  */
 export const useUpdateURLCatalogParams = (): void => {
   const { exploreState } = useExploreState();
+  // `pathname` is intentionally still read from useRouter() here so it stays as
+  // the route pattern (e.g. `/[entityListType]/[entityId]`). The pattern is
+  // required by the Router.replace({ pathname, query }) call below — Next.js
+  // interpolates dynamic-param keys (entityListType, entityId, …) out of the
+  // query into the path. usePathname() would return the already-resolved URL,
+  // which on dynamic routes would leave those keys in the query string. The
+  // migration to usePathname()/router.replace() is tracked in #930 and #931
+  // and will be done together with the Router.replace refactor.
   const { basePath, pathname, query } = useRouter();
   const { catalogState } = exploreState;
 

src/views/ExportMethodView/exportMethodView.tsx

@@ -1,4 +1,4 @@
-import { useRouter } from "next/router";
+import { usePathname } from "next/navigation";
 import { JSX } from "react";
 import { ComponentCreator } from "../../components/ComponentCreator/ComponentCreator";
 import { BackPageView } from "../../components/Layout/components/BackPage/backPageView";
@@ -8,7 +8,7 @@ import { useUpdateURLSearchParams } from "../../hooks/useUpdateURLSearchParams";
 
 export const ExportMethodView = (): JSX.Element => {
   useUpdateURLSearchParams();
-  const { pathname } = useRouter();
+  const pathname = usePathname() ?? "";
   const { exportMethods, tabs } = useExportConfig();
   const { sideColumn } = tabs[0];
   const { mainColumn, top } =