React-toastify: When I redirect to another page toaster not come

[fintegri]

import {toast,ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

//Onclick function

toast.success(getresult.Message, {
position: toast.POSITION.TOP_RIGHT
});

this.props.history.push('/'); // When I use redirect toaster not come please help me

[fkhadra]

Hello @fintegri,

Please reproduce the issue with codesanbox. Thank you

[arananegra]

I have been also dealing with this problem in my codebase whenever I have to use any history action from React-Router. I will try to provide a codesandbox.

Basically my config is a ToastContainer per page with an unique ID and then in the thunks when I try for example:

//More code inside the thunk
await signUp();
history.push('/login');
toast.success('Sign up email sent', {containerId: loginComponentIds.loginComponent});

Technically the toast should be rendering in the login page but it doesn't.

Any ideas while I try to reproduce it?

[fkhadra]

I would suggest to render the ToastContainer at the root of your app. Outside of react-router if possible

[arananegra]

Ok, it was definitely some ToastContainer messing up somewhere in the code.

I will refactor and remove those custom ToastContainer per page components. I was using them so I don't have to duplicate the special toast configuration on each toast call.

Thanks for your quick reply.

[fkhadra]

Hppy it solved your issue !