React Toast异常：未登录跳转时消息无法正常显示

原因分析 #

你在组件渲染阶段直接调用toast.error()后立刻返回<Navigate>，会导致组件立即卸载——react-hot-toast的toast消息还没完成DOM挂载，就跟着组件一起被销毁了，所以只会在toast即将消失的瞬间短暂闪现。

解决方法 #

用useEffect处理登录校验逻辑，确保toast有足够时间渲染完成后再执行跳转，以下是两种可行方案：

方案1：给Toast预留渲染时间 #

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

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

    useEffect(() => {
        if (!isLoggedIn) {
            toast.error("Login Required");
            // 给toast留100ms渲染时间，再跳转（时间可按需调整）
            const timer = setTimeout(() => {
                navigate("/login");
            }, 100);
            return () => clearTimeout(timer);
        }
    }, [isLoggedIn, navigate]);

    // 未登录时返回空占位，避免组件直接卸载
    if (!isLoggedIn) {
        return null;
    }

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

export default Dashboard;

方案2：等Toast消失后再跳转 #

利用react-hot-toast的onClose回调，让用户完整看完提示后再跳转：

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

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

    useEffect(() => {
        if (!isLoggedIn) {
            toast.error("Login Required", {
                onClose: () => {
                    navigate("/login");
                }
            });
        }
    }, [isLoggedIn, navigate]);

    if (!isLoggedIn) {
        return null;
    }

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

export default Dashboard;

内容的提问来源于stack exchange，提问作者The Beast