React-toastify报错：dispatcher is null及无效Hook调用求助

• 检查React版本兼容性
  react-toastify的新版本对React版本有要求，比如v9+需要React 16.8及以上（支持Hooks）。执行npm list react react-dom查看当前版本，若版本过低，要么升级React到兼容版本，要么降级react-toastify到适配旧版本的分支（比如v8.x）。

• 确认ToastContainer的挂载位置
  必须将ToastContainer放在React组件树内部，且处于BrowserRouter的上下文范围内。不要把它放在路由配置外层或者非React环境中，比如可以直接挂载在App组件的根节点下：

  // App.js
  import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
  import { ToastContainer } from 'react-toastify';
  import 'react-toastify/dist/ReactToastify.css';
  import Popup from './Popup';
  
  function App() {
    return (
      <Router>
        <div className="App">
          <Routes>
            <Route path="/popup" element={<Popup />} />
          </Routes>
          <ToastContainer />
        </div>
      </Router>
    );
  }
  

• 消除重复的React实例
  项目中存在多个React实例是触发该错误的常见原因。执行npm dedupe合并重复依赖，或者删除package-lock.json/yarn.lock后重新执行npm install，确保整个项目只有一套react和react-dom依赖。

• 规范toast方法的调用时机
  确保toast()方法在React组件的生命周期内调用，比如事件处理函数、useEffect钩子中，不要在组件外部或非React上下文环境中直接调用：

  // Popup.js
  import { toast } from 'react-toastify';
  
  function Popup() {
    const triggerToast = () => {
      toast.success('Toast 加载成功');
    };
  
    return <button onClick={triggerToast}>显示提示</button>;
  }
  

• 检查手动配置的webpack（若有）
  如果项目是手动配置webpack，需将react和react-dom设为外部依赖，避免打包时重复引入：

  // webpack.config.js
  module.exports = {
    // ...其他配置
    externals: {
      react: 'React',
      'react-dom': 'ReactDOM'
    }
  };
  

内容的提问来源于stack exchange，提问作者bgn-dev