React路由跳转后Toast提示不显示问题求助

问题原因 #

调用navigate('/login')后，当前注册组件会被立即卸载。如果你的Toast组件依赖该组件的上下文（比如基于React Context封装的Toast库），组件卸载后Toast的渲染环境会消失，导致提示无法正常显示。

可行解决办法 #

1. 调整执行顺序：先显示Toast再跳转 #

将Toast调用放在navigate之前，确保Toast触发渲染后再执行页面跳转：

try{
     const user = await createUserWithEmailAndPassword(auth, email, password)
     console.log(user);
     toast.success('Registered Successfully');
     navigate('/login');
}
catch(error){
   console.log(error);
}

2. 使用全局挂载的Toast组件 #

如果你的Toast库支持全局注册（比如Ant Design的Message/Toast组件，或自定义全局Toast），将Toast组件挂载在应用根层级（如App.js、Layout组件中）。这样即使当前组件卸载，全局Toast仍能正常显示。

3. 给跳转添加短暂延迟（不推荐，仅作兜底） #

若必须在跳转后显示Toast，可给navigate添加短延迟，让Toast有足够时间渲染：

try{
     const user = await createUserWithEmailAndPassword(auth, email, password)
     console.log(user);
     navigate('/login');
     setTimeout(() => {
         toast.success('Registered Successfully');
     }, 100);
}
catch(error){
   console.log(error);
}

注意：该方法依赖设备性能，不同设备可能出现Toast仍不显示的情况，优先推荐前两种方案。

内容的提问来源于stack exchange，提问作者Mani Shankar