React - Toast 消息无法正常工作

Question

我正在尝试实施登录检查。我想在用户查看页面之前检查用户是否已登录。如果没有，则将用户重定向到登录页面。当用户重定向到登录页面时，我想显示一条 toast 消息 - “需要登录”。这就是我所做的 -

import Layout from "../../../Component/Layout/Layout";
import { Navigate } from "react-router-dom";
import { useAuth } from "../../../Context/AuthContext";
import { toast } from 'react-hot-toast';

function Dashboard() {
    const {isLoggedIn, userId, userType, login, logout} = useAuth();
    
    if (!isLoggedIn) {
        toast.error("Login Required");
        return <Navigate to="/login" />;
    }
    
    return (
        <Layout>
            <h1>Dashboard</h1>
        </Layout>
    )
}

export default Dashboard;

useAuth() 是我创建的自定义挂钩。

问题是，当我重定向时，没有显示 toast 消息。只有当它即将消失时才可见。我该如何解决这个问题？

编辑 1：我读到在导航之前添加超时会有所帮助。我试过了，但没成功。

Answer 1

希望这能解决您的问题

import Layout from "../../../Component/Layout/Layout";
import { Navigate } from "react-router-dom";
import { useAuth } from "../../../Context/AuthContext";
import { toast } from 'react-hot-toast';

function Dashboard() {
    const { isLoggedIn } = useAuth();

    if (!isLoggedIn) {
        toast.error("Login Required");

        setTimeout(() => {
            return <Navigate to="/login" />;
        }, 1000);
    }

    return (
        <Layout>
            <h1>Dashboard</h1>
        </Layout>
    )
}

export default Dashboard;