当页面重定向到另一个页面时，React toastify 不起作用。但它在同一页面上工作

Question

我将 react-toastify 用于 toast 通知，但是当我的页面重定向到另一个页面时它不起作用。

It is not working mydata is save to the data base. It is working when my page is not redirect.

const [email, setEmail] = useState("");
const [password, setPassword] = useState("");

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 });
        // console.log(res);
        history.push("/");

    }
}

the above code is for login. here notification is not working in else condition, but working in if condition.

Above Mentioned alert

    const successAlert = () => {
    // window.alert("Invalid Credentials");
    toast("User logged in successfully", {
        position: "top-right",
        autoClose: 2000,
        hideProgressBar: false,
        closeOnClick: true,
        pauseOnHover: false,
        draggable: true,
        progress: undefined,

    });
}


    const warningAlert = () => {
    // window.alert("Invalid Credentials");
    toast.error("Invalid Credentials", {
        position: "top-right",
        autoClose: 2000,
        hideProgressBar: false,
        closeOnClick: true,
        pauseOnHover: false,
        draggable: true,
        progress: undefined,

    });
}

Answer 1

您必须在项目的根目录中使用 <ToastContainer/>，以便可以从所有页面访问此容器。然后调用函数

Official Doc

当页面重定向到另一个页面时，React toastify 不起作用。但它在同一页面上工作

React toastify is not working , when page is redirect to another page. But it is working on same page

reactjs

react-notifications