diff --git a/packages/app/src/hooks/useUrlQueryActiveKey/index.js b/packages/app/src/hooks/useUrlQueryActiveKey/index.js
new file mode 100644
index 00000000..f4e18725
--- /dev/null
+++ b/packages/app/src/hooks/useUrlQueryActiveKey/index.js
@@ -0,0 +1,22 @@
+import React from "react"
+
+export default ({
+    defaultKey = "0",
+    queryKey = "key",
+}) => {
+    const [activeKey, setActiveKey] = React.useState(new URLSearchParams(window.location.search).get(queryKey) ?? defaultKey)
+
+    const replaceQueryTypeToCurrentTab = (key) => {
+        app.history.replace(`${window.location.pathname}?${queryKey}=${key}`)
+    }
+
+    const changeActiveKey = (key) => {
+        setActiveKey(key)
+        replaceQueryTypeToCurrentTab(key)
+    }
+
+    return [
+        activeKey,
+        changeActiveKey,
+    ]
+}
\ No newline at end of file