改用数据模式 Router

client/ui/Main.tsx

@@ -3,7 +3,7 @@ import useEventListener from "../utils/useEventListener.ts"
 import AvatarMySelf from "./AvatarMySelf.tsx"
 import MainSharedContext from './MainSharedContext.ts'
 import * as React from 'react'
-import { BrowserRouter, Link, Outlet, Route, Routes, useNavigate } from "react-router"
+import { BrowserRouter, createBrowserRouter, Link, Outlet, Route, RouterProvider, Routes } from "react-router"
 import LoginDialog from "./main-page/LoginDialog.tsx"
 import useAsyncEffect from "../utils/useAsyncEffect.ts"
 import performAuth from "../performAuth.ts"
@@ -18,24 +18,7 @@ import AllChatsList from "./main-page/AllChatsList.tsx"
 import FavouriteChatsList from "./main-page/FavouriteChatsList.tsx"
 import AddFavourtieChatDialog from "./main-page/AddFavourtieChatDialog.tsx"
 import RecentChatsList from "./main-page/RecentChatsList.tsx"
-import ChatInfoDialog from "./routers/ChatInfoDialog.tsx"
-
-function Test() {
-    const nav = useNavigate()
-    const dialogRef = React.useRef<Dialog>()
-    useAsyncEffect(async () => {
-        await sleep(10)
-        dialogRef.current!.open = true
-        dialogRef.current!.addEventListener('overlay-click', () => {
-            dialogRef.current!.open = false
-        })
-        dialogRef.current!.addEventListener('closed', async () => {
-            await sleep(100)
-            nav(-1)
-        })
-    }, [])
-    return <mdui-dialog ref={dialogRef}></mdui-dialog>
-}
+import UserOrChatInfoDialog from "./routers/UserOrChatInfoDialog.tsx"
 
 export default function Main() {
     const [myProfileCache, setMyProfileCache] = React.useState<UserMySelf>()
@@ -111,11 +94,8 @@ export default function Main() {
         waitingForAuth.open = false
     })
 
-    return (
-        <BrowserRouter>
+    const Root = (
         <MainSharedContext.Provider value={sharedContext}>
-                <Routes>
-                    <Route path="/" element={(
             <div style={{
                 display: "flex",
                 position: 'relative',
@@ -230,14 +210,16 @@ export default function Main() {
                     </mdui-navigation-bar>
                 }
             </div>
-                    )}>
-                        <Route path="info">
-                            <Route path="chat" element={<Test />} />
-                            <Route path="user" element={<ChatInfoDialog />} />
-                        </Route>
-                    </Route>
-                </Routes>
         </MainSharedContext.Provider>
-        </BrowserRouter>
     )
+
+    const router = createBrowserRouter([{
+        path: "/",
+        element: Root,
+        children: [
+            { path: 'info/:type', Component: UserOrChatInfoDialog, },
+        ],
+    }])
+
+    return <RouterProvider router={router} />
 }