React Toastify页面跳转时不生效但同页面运行正常，该如何解决？

你的问题本质是调用成功通知后立即执行了路由跳转，当前登录页组件直接被卸载：

• 若你的<ToastContainer />组件挂载在登录页内部，会跟随登录页一起被销毁，还没完成渲染的toast通知会直接消失
• 登录失败的分支没有跳转逻辑，登录页保持挂载状态，所以warning通知可以正常显示

提供两种可独立使用也可搭配使用的修复方案，推荐优先用方案2：

方案1：延迟路由跳转，等toast显示完成后再跳转 #

你的toast配置的autoClose为2000毫秒，只需要把跳转逻辑用setTimeout包裹，延迟对应时长执行即可，修改登录逻辑代码如下：

const loginUser = async (e) => {
    e.preventDefault();
    const res = await fetch("/signin", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({ email, password }),

    });

    const data = await res.json();
    if (res.status === 422 || !res) {
        warningAlert();
        console.log(res);
        console.log("Invalid Credentials")
    } else {
        successAlert();
        dispatch({ type: "USER", payload: true });
        // 延迟2000毫秒跳转，和toast自动关闭时长对齐
        setTimeout(() => {
            history.push("/");
        }, 2000)
    }
}

方案2：将ToastContainer移到全局公共组件 #

把<ToastContainer />从登录页组件中移除，放到路由外层的公共组件（比如App.js、全局Layout组件）中，这类组件不会因为路由切换被卸载，toast通知可以跨页面正常显示，示例代码如下：

// App.js 示例
import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

function App() {
  return (
    <div className="App">
      {/* 放到路由外层，全局生效 */}
      <ToastContainer 
        position="top-right"
        autoClose={2000}
        hideProgressBar={false}
        closeOnClick
        pauseOnHover={false}
        draggable
      />
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route path="/" element={<Home />} />
        {/* 其他路由 */}
      </Routes>
    </div>
  )
}

用这个方案不需要修改原有登录逻辑，跳转后toast依然会在页面顶部正常显示直到自动关闭，用户体验更好。

内容的提问来源于stack exchange，提问作者MAYANK THAKUR