diff --git a/datacenter/app/datastores/documents/chunklist/page.tsx b/datacenter/app/datastores/documents/chunklist/page.tsx
index a75cc56fb..9cd701ff9 100644
--- a/datacenter/app/datastores/documents/chunklist/page.tsx
+++ b/datacenter/app/datastores/documents/chunklist/page.tsx
@@ -1,22 +1,23 @@
 "use client";
 
-import Router from 'next/router'
-import { withRouter } from 'next/router'
+import { useSearchParams } from 'next/navigation'
 import React, { useState, useEffect } from 'react';
 import { Table, Popover } from 'antd';
 import moment from 'moment';
 
-const ChunkList = ({ router }) => {
+const ChunkList = () => {
+    const spaceName = useSearchParams().get('spacename');
+    const documentId = useSearchParams().get('documentid');
     const [chunkList, setChunkList] = useState<any>([]);
     useEffect(() => {
         async function fetchChunks() {
-            const res = await fetch(`http://localhost:8000/knowledge/${router.query.spacename}/chunk/list`, {
+            const res = await fetch(`http://localhost:8000/knowledge/${spaceName}/chunk/list`, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
                 },
                 body: JSON.stringify({
-                    document_id: router.query.documentid
+                    document_id: documentId
                 }),
             });
             const data = await res.json();
@@ -61,4 +62,4 @@ const ChunkList = ({ router }) => {
     )
 }
 
-export default withRouter(ChunkList);
\ No newline at end of file
+export default ChunkList;
\ No newline at end of file
diff --git a/datacenter/app/datastores/documents/page.tsx b/datacenter/app/datastores/documents/page.tsx
index a29c0a03f..54bd31d5d 100644
--- a/datacenter/app/datastores/documents/page.tsx
+++ b/datacenter/app/datastores/documents/page.tsx
@@ -1,16 +1,18 @@
 "use client";
 
-import Router from 'next/router'
-import { withRouter } from 'next/router'
+import Link from 'next/link'
+import { useRouter, useSearchParams } from 'next/navigation'
 import React, { useState, useEffect } from 'react';
 import { Table, Button } from 'antd';
 import moment from 'moment';
 
-const Documents = ({ router }) => {
+const Documents = () => {
+    const router = useRouter();
+    const spaceName = useSearchParams().get('name');
     const [documents, setDocuments] = useState<any>([]);
     useEffect(() => {
         async function fetchDocuments() {
-            const res = await fetch(`http://localhost:8000/knowledge/${router.query.name}/document/list`, {
+            const res = await fetch(`http://localhost:8000/knowledge/${spaceName}/document/list`, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
@@ -67,7 +69,7 @@ const Documents = ({ router }) => {
                         render: (_: any, label: any) => {
                             return (
                                 <Button onClick={() => {
-                                    Router.push(`/datastores/documents/chunklist?spacename=${router.query.name}&documentid=${label.id}`)
+                                    router.push(`/datastores/documents/chunklist?spacename=${spaceName}&documentid=${label.id}`)
                                 }}>Detail of Chunks</Button>
                             )
                         }
@@ -79,4 +81,4 @@ const Documents = ({ router }) => {
     )
 }
 
-export default withRouter(Documents);
\ No newline at end of file
+export default Documents;
\ No newline at end of file
diff --git a/datacenter/app/datastores/page.tsx b/datacenter/app/datastores/page.tsx
index 39a0a1e83..aeca11bfe 100644
--- a/datacenter/app/datastores/page.tsx
+++ b/datacenter/app/datastores/page.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import Router from 'next/router'
+import { useRouter } from 'next/navigation'
 import type { ProFormInstance } from '@ant-design/pro-components';
 import React, { useState, useRef, useEffect } from 'react'
 import {
@@ -17,6 +17,7 @@ import {
 import { Button, Modal, Table, message } from 'antd'
 
 const Index = () => {
+  const router = useRouter();
   const formRef = useRef<ProFormInstance>();
   const [knowledgeSpaceList, setKnowledgeSpaceList] = useState<any>([]);
   const [isAddKnowledgeSpaceModalShow, setIsAddKnowledgeSpaceModalShow] =
@@ -56,7 +57,7 @@ const Index = () => {
               key: 'name',
               align: 'center',
               render: (text: string) => {
-                return <a href='javascript:;' onClick={() => Router.push(`/datastores/documents?name=${text}`)}>{text}</a>
+                return <a href='javascript:;' onClick={() => router.push(`/datastores/documents?name=${text}`)}>{text}</a>
               }
             },
             {