Use id as path parameter

src/apps/dashboard/features/tasks/components/Task.tsx

@@ -40,7 +40,7 @@ const Task: FunctionComponent<TaskProps> = ({ task }: TaskProps) => {
                 </IconButton>
             }
         >
-            <ListItemLink to={`/dashboard/tasks/edit?id=${task.Id}`}>
+            <ListItemLink to={`/dashboard/tasks/${task.Id}`}>
                 <ListItemAvatar>
                     <Avatar sx={{ bgcolor: 'primary.main' }}>
                         <AccessTimeIcon sx={{ color: '#fff' }} />

src/apps/dashboard/routes/_asyncRoutes.ts

@@ -15,7 +15,7 @@ export const ASYNC_ADMIN_ROUTES: AsyncRoute[] = [
     { path: 'playback/trickplay', type: AppType.Dashboard },
     { path: 'plugins/:pluginId', page: 'plugins/plugin', type: AppType.Dashboard },
     { path: 'tasks', type: AppType.Dashboard },
-    { path: 'tasks/edit', type: AppType.Dashboard },
+    { path: 'tasks/:id', page: 'tasks/task', type: AppType.Dashboard },
     { path: 'users', type: AppType.Dashboard },
     { path: 'users/access', type: AppType.Dashboard },
     { path: 'users/add', type: AppType.Dashboard },

src/apps/dashboard/routes/tasks/task.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import Page from 'components/Page';
-import { useSearchParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Stack from '@mui/material/Stack';
@@ -19,10 +19,9 @@ import ConfirmDialog from 'components/ConfirmDialog';
 import TaskTriggerCell from 'apps/dashboard/features/tasks/components/TaskTriggerCell';
 import NewTriggerForm from 'apps/dashboard/features/tasks/components/NewTriggerForm';
 
-const TaskEdit = () => {
-    const [ searchParams ] = useSearchParams();
+export const Component = () => {
+    const { id: taskId } = useParams();
     const updateTask = useUpdateTask();
-    const taskId = searchParams.get('id');
     const { data: task, isLoading } = useTask({ taskId: taskId || '' });
     const [ isAddTriggerDialogOpen, setIsAddTriggerDialogOpen ] = useState(false);
     const [ isRemoveConfirmOpen, setIsRemoveConfirmOpen ] = useState(false);
@@ -170,4 +169,4 @@ const TaskEdit = () => {
     );
 };
 
-export default TaskEdit;
+Component.displayName = 'TaskPage';