React Toastify在项目中无法显示问题排查求助

问题原因 #

你在注册页面调用了 React Toastify 的 toast 方法，但在 App.js 中错误导入了 react-bootstrap 的 ToastContainer，而非 React Toastify 自身的容器组件。React Toastify 的通知必须依赖自身的 ToastContainer 才能完成渲染显示。

解决步骤 #

1. 修正 App.js 的导入语句
   将原本从 react-bootstrap 导入的 ToastContainer，替换为 React Toastify 的版本：

   // 替换前
   import { ToastContainer } from 'react-bootstrap';
   
   // 替换后
   import { ToastContainer } from 'react-toastify';
   // 可选：全局导入样式，避免在单个页面重复导入
   import 'react-toastify/dist/ReactToastify.css';
   

2. 保留 ToastContainer 的渲染位置
   原有的 <ToastContainer/> 组件位置无需改动，确保它处于路由组件之外（你当前的写法是正确的）：

   <>
     <Router>
       <Routes>
         <Route path='/' element={<Home />} />
         <Route path='/login' element={<Login />} />
         <Route path='/signup' element={<SignUp />} />
         <Route path='/Users' element={<Users />} />
         <Route path='*' element={<NotFound />} />
       </Routes>
     </Router>
     <ToastContainer/> {/* 该位置保持不变 */}
   </>
   

3. 可选：优化样式导入
   如果你已经在注册页面导入了 react-toastify/dist/ReactToastify.css，可以保留；也可以删除页面中的样式导入，统一在 App.js 中全局导入，避免重复加载。

验证修改 #

完成上述调整后重新运行项目，触发注册提交逻辑时，React Toastify 的成功/错误通知即可正常显示。

内容的提问来源于stack exchange，提问作者Hadal Magdy