Fix navigate with query (MystenLabs#6066)

apps/explorer/.eslintrc.js

@@ -138,9 +138,9 @@ module.exports = {
                 paths: [
                     {
                         name: 'react-router-dom',
-                        importNames: ['Link'],
+                        importNames: ['Link', 'useNavigate'],
                         message:
-                            'Please use `LinkWithQuery` from "~/ui/utils/LinkWithQuery" instead.',
+                            'Please use `LinkWithQuery` and `useNavigateWithQuery` from "~/ui/utils/LinkWithQuery" instead.',
                     },
                 ],
             },

apps/explorer/src/components/longtext/Longtext.tsx

@@ -3,7 +3,6 @@
 
 import { useCallback, useState, useContext } from 'react';
 import toast from 'react-hot-toast';
-import { useNavigate } from 'react-router-dom';
 
 import { ReactComponent as ContentArrowRight } from '../../assets/SVGIcons/12px/ArrowRight.svg';
 import { ReactComponent as ContentCopyIcon16 } from '../../assets/SVGIcons/16px/Copy.svg';
@@ -16,7 +15,7 @@ import type { ReactNode } from 'react';
 
 import styles from './Longtext.module.css';
 
-import { LinkWithQuery } from '~/ui/utils/LinkWithQuery';
+import { LinkWithQuery, useNavigateWithQuery } from '~/ui/utils/LinkWithQuery';
 
 function Longtext({
     text,
@@ -43,7 +42,7 @@ function Longtext({
 }) {
     const [pleaseWait, setPleaseWait] = useState(false);
     const [network] = useContext(NetworkContext);
-    const navigate = useNavigate();
+    const navigate = useNavigateWithQuery();
 
     const handleCopyEvent = useCallback(() => {
         navigator.clipboard.writeText(text);

apps/explorer/src/components/ownedobjects/OwnedObjects.tsx

@@ -9,7 +9,6 @@ import {
     useContext,
     createContext,
 } from 'react';
-import { useNavigate } from 'react-router-dom';
 
 import { NetworkContext } from '../../context';
 import { IS_STATIC_ENV } from '../../utils/envUtil';
@@ -30,6 +29,7 @@ import OwnedObjectView from './views/OwnedObjectView';
 import styles from './styles/OwnedObjects.module.css';
 
 import { useRpc } from '~/hooks/useRpc';
+import { useNavigateWithQuery } from '~/ui/utils/LinkWithQuery';
 
 const DATATYPE_DEFAULT: DataType = [
     {
@@ -56,7 +56,7 @@ const NavigateFunctionContext = createContext<(id: string) => () => void>(
 );
 
 function OwnedObjectStatic({ id }: { id: string }) {
-    const navigate = useNavigate();
+    const navigate = useNavigateWithQuery();
 
     const navigateFn = useCallback(
         (id: string) => () => navigateWithUnknown(id, navigate),
@@ -97,7 +97,7 @@ function OwnedObjectAPI({ id, byAddress }: { id: string; byAddress: boolean }) {
     const [isFail, setIsFail] = useState(false);
     const [network] = useContext(NetworkContext);
     const rpc = useRpc();
-    const navigate = useNavigate();
+    const navigate = useNavigateWithQuery();
     const navigateFn = useCallback(
         (id: string) => () => navigateWithUnknown(id, navigate, network),
         [navigate, network]

apps/explorer/src/components/search/Search.tsx

@@ -2,18 +2,19 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React, { useState, useCallback, useContext } from 'react';
-import { useNavigate } from 'react-router-dom';
 
 import { ReactComponent as SearchIcon } from '../../assets/search.svg';
 import { NetworkContext } from '../../context';
 import { navigateWithUnknown } from '../../utils/searchUtil';
 
 import styles from './Search.module.css';
 
+import { useNavigateWithQuery } from '~/ui/utils/LinkWithQuery';
+
 function Search() {
     const [input, setInput] = useState('');
     const [network] = useContext(NetworkContext);
-    const navigate = useNavigate();
+    const navigate = useNavigateWithQuery();
 
     const [pleaseWaitMode, setPleaseWaitMode] = useState(false);
 

apps/explorer/src/ui/utils/LinkWithQuery.tsx

@@ -1,12 +1,33 @@
 // Copyright (c) Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import { forwardRef } from 'react';
-// eslint-disable-next-line no-restricted-imports
-import { Link, useLocation, type LinkProps } from 'react-router-dom';
+import { forwardRef, useCallback } from 'react';
+import {
+    // eslint-disable-next-line no-restricted-imports
+    Link,
+    useLocation,
+    // eslint-disable-next-line no-restricted-imports
+    useNavigate,
+    type NavigateOptions,
+    type LinkProps,
+} from 'react-router-dom';
 
 export { LinkProps };
 
+export function useNavigateWithQuery() {
+    const navigate = useNavigate();
+    const { search } = useLocation();
+
+    const navigateWithQuery = useCallback(
+        (url: string, options: NavigateOptions) => {
+            return navigate(`${url}${search}`, options);
+        },
+        [navigate, search]
+    );
+
+    return navigateWithQuery;
+}
+
 export const LinkWithQuery = forwardRef<HTMLAnchorElement, LinkProps>(
     ({ to, ...props }) => {
         const { search } = useLocation();