diff --git a/client/ui/routers/useRouterDialogRef.ts b/client/ui/routers/useRouterDialogRef.ts index 15a317a..8144ed9 100644 --- a/client/ui/routers/useRouterDialogRef.ts +++ b/client/ui/routers/useRouterDialogRef.ts @@ -1,31 +1,32 @@ import { Dialog } from "mdui" import useAsyncEffect from "../../utils/useAsyncEffect" import sleep from "../../utils/sleep" -import { useBlocker, useNavigate } from "react-router" +import { BlockerFunction, useBlocker, useNavigate } from "react-router" import * as React from 'react' export default function useRouterDialogRef() { const dialogRef = React.useRef() + const proceedRef = React.useRef<() => void>() const shouldBlock = React.useRef(true) const nav = useNavigate() - const blocker = useBlocker(({ currentLocation, nextLocation }) => shouldBlock.current && currentLocation.pathname !== nextLocation.pathname) + const blocker = useBlocker(React.useCallback(() => shouldBlock.current, [])) // 避免用户手动返回导致动画丢失 React.useEffect(() => { if (blocker.state === "blocked") { + proceedRef.current = blocker.proceed // 这个让姐姐来就好啦 dialogRef.current!.open = false } - }, [blocker]) + }, [blocker.state]) useAsyncEffect(async () => { await sleep(10) dialogRef.current!.open = true dialogRef.current!.addEventListener('closed', async () => { - await sleep(10) - // 无论如何, 让姐姐先解除返回限制, 这样才能出去嘛 shouldBlock.current = false - nav(-1) + await sleep(10) + proceedRef.current ? proceedRef.current() : nav(-1) }) }, []) return dialogRef