3秒内重定向到React中的另一个页面，不起作用

Question

export default function Home() {
    const [redirect, setRedirect] = useState<boolean>(false);
    const [redirecting, setRedirecting] = useState<boolean>(false);

    const userContext = useContext(UserContext);

    useEffect(() => {
        const value: string | null = localStorage.getItem("user");
        if (!value) {
            return setRedirecting(true);
        }
        const user: User = JSON.parse(value ?? "");

        if (userContext) {
            userContext.setUser({
                ...user,
            });
        }
    }, [userContext]);

    useEffect(() => {
        if (redirecting) {
            setTimeout(() => {
                console.log("here 1")
                setRedirect(true)
            }, 3000);
        }
    }, [redirecting]);

    if (redirecting || !userContext?.user) {
        return (
            <Container sx={{ my: 2 }}>
                <Typography variant="h5">
                    You need to register to access this page.
                </Typography>
            </Container>
        );
    }
    if (redirect) {
        console.log("here 2");
        return <Navigate to={ "/register"} />
    }

    return (
        <div>Home Content</div>
    );
}

重定向的值确实发生了变化，但不知何故，负责导航的代码没有执行。

Answer 1

useEffect(() => {
        if (redirecting) {
            setTimeout(() => {
                console.log("here 1")
                setRedirect(true)
            }, 3000);
        }
    }, [redirecting]);
if (redirecting || !userContext?.user) {
        return (
            <Container sx={{ my: 2 }}>
                <Typography variant="h5">
                    You need to register to access this page.
                </Typography>
            </Container>
        );
    }
    if (redirect) {
        console.log("here 2");
        return <Navigate to={ "/register"} />
    }