diff --git a/packages/ui/src/routes/MainRoutes.jsx b/packages/ui/src/routes/MainRoutes.jsx
index ad60cb77565..b4b9bbe4a21 100644
--- a/packages/ui/src/routes/MainRoutes.jsx
+++ b/packages/ui/src/routes/MainRoutes.jsx
@@ -98,27 +98,27 @@ const MainRoutes = {
             element: <Documents />
         },
         {
-            path: '/document-stores/:id',
+            path: '/document-stores/:storeId',
             element: <DocumentStoreDetail />
         },
         {
-            path: '/document-stores/chunks/:id/:id',
+            path: '/document-stores/chunks/:storeId/:fileId',
             element: <ShowStoredChunks />
         },
         {
-            path: '/document-stores/:id/:name',
+            path: '/document-stores/:storeId/:name',
             element: <LoaderConfigPreviewChunks />
         },
         {
-            path: '/document-stores/vector/:id',
+            path: '/document-stores/vector/:storeId',
             element: <VectorStoreConfigure />
         },
         {
-            path: '/document-stores/vector/:id/:docId',
+            path: '/document-stores/vector/:storeId/:docId',
             element: <VectorStoreConfigure />
         },
         {
-            path: '/document-stores/query/:id',
+            path: '/document-stores/query/:storeId',
             element: <VectorStoreQuery />
         }
     ]
diff --git a/packages/ui/src/views/assistants/custom/CustomAssistantConfigurePreview.jsx b/packages/ui/src/views/assistants/custom/CustomAssistantConfigurePreview.jsx
index 14854b20b8b..6356f8547af 100644
--- a/packages/ui/src/views/assistants/custom/CustomAssistantConfigurePreview.jsx
+++ b/packages/ui/src/views/assistants/custom/CustomAssistantConfigurePreview.jsx
@@ -1,7 +1,7 @@
 import { cloneDeep, set } from 'lodash'
 import { memo, useEffect, useState, useRef } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router-dom'
 import { FullPageChat } from 'flowise-embed-react'
 import PropTypes from 'prop-types'
 
@@ -76,8 +76,7 @@ const CustomAssistantConfigurePreview = () => {
     const getToolsApi = useApi(assistantsApi.getTools)
     const getSpecificChatflowApi = useApi(chatflowsApi.getSpecificChatflow)
 
-    const URLpath = document.location.pathname.toString().split('/')
-    const customAssistantId = URLpath[URLpath.length - 1] === 'assistants' ? '' : URLpath[URLpath.length - 1]
+    const { id: customAssistantId } = useParams()
 
     const [chatModelsComponents, setChatModelsComponents] = useState([])
     const [chatModelsOptions, setChatModelsOptions] = useState([])
diff --git a/packages/ui/src/views/docstore/DocumentStoreDetail.jsx b/packages/ui/src/views/docstore/DocumentStoreDetail.jsx
index 986bd1e9770..ad1864b1f4f 100644
--- a/packages/ui/src/views/docstore/DocumentStoreDetail.jsx
+++ b/packages/ui/src/views/docstore/DocumentStoreDetail.jsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import * as PropTypes from 'prop-types'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router-dom'
 
 // material-ui
 import {
@@ -146,8 +146,7 @@ const DocumentStoreDetails = () => {
     const [anchorEl, setAnchorEl] = useState(null)
     const open = Boolean(anchorEl)
 
-    const URLpath = document.location.pathname.toString().split('/')
-    const storeId = URLpath[URLpath.length - 1] === 'document-stores' ? '' : URLpath[URLpath.length - 1]
+    const { storeId } = useParams()
 
     const openPreviewSettings = (id) => {
         navigate('/document-stores/' + storeId + '/' + id)
diff --git a/packages/ui/src/views/docstore/LoaderConfigPreviewChunks.jsx b/packages/ui/src/views/docstore/LoaderConfigPreviewChunks.jsx
index a4e0ecad9ac..861e9e3fe5d 100644
--- a/packages/ui/src/views/docstore/LoaderConfigPreviewChunks.jsx
+++ b/packages/ui/src/views/docstore/LoaderConfigPreviewChunks.jsx
@@ -2,7 +2,7 @@ import { cloneDeep } from 'lodash'
 import { useEffect, useState } from 'react'
 import { validate as uuidValidate, v4 as uuidv4 } from 'uuid'
 import { useDispatch, useSelector } from 'react-redux'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router-dom'
 import ReactJson from 'flowise-react-json-view'
 
 // Hooks
@@ -66,9 +66,7 @@ const LoaderConfigPreviewChunks = () => {
     const getNodesByCategoryApi = useApi(nodesApi.getNodesByCategory)
     const getSpecificDocumentStoreApi = useApi(documentsApi.getSpecificDocumentStore)
 
-    const URLpath = document.location.pathname.toString().split('/')
-    const docLoaderNodeName = URLpath[URLpath.length - 1] === 'document-stores' ? '' : URLpath[URLpath.length - 1]
-    const storeId = URLpath[URLpath.length - 2] === 'document-stores' ? '' : URLpath[URLpath.length - 2]
+    const { storeId, name: docLoaderNodeName } = useParams()
 
     const [selectedDocumentLoader, setSelectedDocumentLoader] = useState({})
 
diff --git a/packages/ui/src/views/docstore/ShowStoredChunks.jsx b/packages/ui/src/views/docstore/ShowStoredChunks.jsx
index 5a2db316b67..07d477e8ac5 100644
--- a/packages/ui/src/views/docstore/ShowStoredChunks.jsx
+++ b/packages/ui/src/views/docstore/ShowStoredChunks.jsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router-dom'
 import ReactJson from 'flowise-react-json-view'
 
 // material-ui
@@ -60,9 +60,7 @@ const ShowStoredChunks = () => {
 
     const getChunksApi = useApi(documentsApi.getFileChunks)
 
-    const URLpath = document.location.pathname.toString().split('/')
-    const fileId = URLpath[URLpath.length - 1] === 'document-stores' ? '' : URLpath[URLpath.length - 1]
-    const storeId = URLpath[URLpath.length - 2] === 'document-stores' ? '' : URLpath[URLpath.length - 2]
+    const { storeId, fileId } = useParams()
 
     const [documentChunks, setDocumentChunks] = useState([])
     const [totalChunks, setTotalChunks] = useState(0)
diff --git a/packages/ui/src/views/docstore/VectorStoreConfigure.jsx b/packages/ui/src/views/docstore/VectorStoreConfigure.jsx
index 52d4e0e6f19..f4131290ef7 100644
--- a/packages/ui/src/views/docstore/VectorStoreConfigure.jsx
+++ b/packages/ui/src/views/docstore/VectorStoreConfigure.jsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router-dom'
 import { cloneDeep } from 'lodash'
 import { v4 as uuidv4 } from 'uuid'
 import moment from 'moment/moment'
@@ -50,9 +50,7 @@ const VectorStoreConfigure = () => {
     useNotifier()
     const customization = useSelector((state) => state.customization)
 
-    const pathSegments = document.location.pathname.toString().split('/')
-    const storeId = pathSegments[3] || null
-    const docId = pathSegments[4] || null
+    const { storeId, docId } = useParams()
 
     const enqueueSnackbar = (...args) => dispatch(enqueueSnackbarAction(...args))
     const closeSnackbar = (...args) => dispatch(closeSnackbarAction(...args))
diff --git a/packages/ui/src/views/docstore/VectorStoreQuery.jsx b/packages/ui/src/views/docstore/VectorStoreQuery.jsx
index 69234ed42e3..100683912d8 100644
--- a/packages/ui/src/views/docstore/VectorStoreQuery.jsx
+++ b/packages/ui/src/views/docstore/VectorStoreQuery.jsx
@@ -1,6 +1,6 @@
 import { useEffect, useState, useRef } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router-dom'
 import ReactJson from 'flowise-react-json-view'
 import { cloneDeep } from 'lodash'
 import { v4 as uuidv4 } from 'uuid'
@@ -63,8 +63,7 @@ const VectorStoreQuery = () => {
     const enqueueSnackbar = (...args) => dispatch(enqueueSnackbarAction(...args))
     const closeSnackbar = (...args) => dispatch(closeSnackbarAction(...args))
 
-    const URLpath = document.location.pathname.toString().split('/')
-    const storeId = URLpath[URLpath.length - 1] === 'document-stores' ? '' : URLpath[URLpath.length - 1]
+    const { storeId } = useParams()
 
     const [documentChunks, setDocumentChunks] = useState([])
     const [loading, setLoading] = useState(false)