diff --git a/optuna_dashboard/ts/components/CompareStudies.tsx b/optuna_dashboard/ts/components/CompareStudies.tsx
index e380485c..77013b4b 100644
--- a/optuna_dashboard/ts/components/CompareStudies.tsx
+++ b/optuna_dashboard/ts/components/CompareStudies.tsx
@@ -29,12 +29,8 @@ import { studySummariesState, studyDetailsState } from "../state"
 import { AppDrawer } from "./AppDrawer"
 import { GraphEdf } from "./GraphEdf"
 import { GraphHistory } from "./GraphHistory"
-import { useNavigate, useLocation } from "react-router-dom"
-
-const useQuery = (): URLSearchParams => {
-  const { search } = useLocation()
-  return useMemo(() => new URLSearchParams(search), [search])
-}
+import { useNavigate } from "react-router-dom"
+import { useQuery } from "../queryUtil"
 
 const useQueriedStudies = (
   studies: StudySummary[],
diff --git a/optuna_dashboard/ts/components/StudyList.tsx b/optuna_dashboard/ts/components/StudyList.tsx
index 14eaa68b..844f4170 100644
--- a/optuna_dashboard/ts/components/StudyList.tsx
+++ b/optuna_dashboard/ts/components/StudyList.tsx
@@ -1,5 +1,5 @@
-import React, { FC, useEffect, useMemo, useState } from "react"
-import { useNavigate, useLocation } from "react-router-dom"
+import React, { FC, useEffect, useState } from "react"
+import { useNavigate } from "react-router-dom"
 import { useRecoilValue } from "recoil"
 import { Link } from "react-router-dom"
 import {
@@ -33,6 +33,7 @@ import { AppDrawer } from "./AppDrawer"
 import { useCreateStudyDialog } from "./CreateStudyDialog"
 import { useDeleteStudyDialog } from "./DeleteStudyDialog"
 import { useRenameStudyDialog } from "./RenameStudyDialog"
+import { useQuery } from "../queryUtil"
 
 export const StudyList: FC<{
   toggleColorMode: () => void
@@ -59,10 +60,6 @@ export const StudyList: FC<{
     useRenameStudyDialog(studies)
 
   const navigate = useNavigate()
-  const useQuery = (): URLSearchParams => {
-    const { search } = useLocation()
-    return useMemo(() => new URLSearchParams(search), [search])
-  }
   const query = useQuery()
   const initialSortBy = query.get("studies_order_by") === "asc" ? "asc" : "desc"
   const [sortBy, setSortBy] = useState<"asc" | "desc">(initialSortBy)
diff --git a/optuna_dashboard/ts/components/TrialList.tsx b/optuna_dashboard/ts/components/TrialList.tsx
index cfde6536..b1856f63 100644
--- a/optuna_dashboard/ts/components/TrialList.tsx
+++ b/optuna_dashboard/ts/components/TrialList.tsx
@@ -21,13 +21,14 @@ import CheckBoxIcon from "@mui/icons-material/CheckBox"
 import StopCircleIcon from "@mui/icons-material/StopCircle"
 
 import { TrialNote } from "./Note"
-import { useNavigate, useLocation } from "react-router-dom"
+import { useNavigate } from "react-router-dom"
 import ListItemIcon from "@mui/material/ListItemIcon"
 import { useRecoilValue } from "recoil"
 import { artifactIsAvailable } from "../state"
 import { actionCreator } from "../action"
 import { TrialFormWidgets } from "./TrialFormWidgets"
 import { TrialArtifactCards } from "./TrialArtifactCards"
+import { useQuery } from "../queryUtil"
 
 const states: TrialState[] = [
   "Complete",
@@ -61,12 +62,6 @@ const getChipColor = (state: TrialState): Color => {
   return "default"
 }
 
-const useQuery = (): URLSearchParams => {
-  const { search } = useLocation()
-
-  return useMemo(() => new URLSearchParams(search), [search])
-}
-
 const useExcludedStates = (query: URLSearchParams): TrialState[] => {
   return useMemo(() => {
     const exclude = query.get("exclude")