使用MDBReact汉堡菜单出现Invalid hook call无效hook调用报错

无效Hook调用报错的核心原因是mdbreact内部组件的Hook运行时，无法匹配到正确的React实例上下文，对应你的项目场景有3个直接触发点：

• React与React DOM的安装版本不匹配，或版本低于Hook功能要求的最低16.8.0版本
• 依赖安装过程中产生了多份重复的React副本，Hook检测时识别为跨实例调用
• mdbreact的安装版本与当前项目React版本存在兼容冲突

• 第一步：对齐React与React DOM版本
  先在项目根目录执行npm ls react react-dom，检查两个包的版本号，要求版本完全一致，且不低于16.8.0。如果版本不符合要求，执行以下命令安装对齐的稳定版本：

  npm install react@18.2.0 react-dom@18.2.0 --save
  

• 第二步：清理重复React副本
  执行npm ls react，如果输出存在多份不同路径的React安装记录，说明依赖重复。先执行npm dedupe统一依赖解析路径，删除重复安装。如果操作无效，删除项目下的node_modules文件夹、package-lock.json或yarn.lock锁文件，重新执行npm install全量安装依赖。
• 第三步：安装兼容的mdbreact版本
  当前React18+项目不要直接安装mdbreact最新开发版，需安装兼容类组件写法的稳定版本：

  npm install mdbreact@5.3.0 --save
  

  注意避免安装mdbreact 6.0及以上版本，该版本已全面切换为纯函数组件实现，在类组件嵌套场景下容易出现上下文检测失效问题。
• 第四步：修正路由层级使用规范
  你当前将<Router>嵌套在独立导航组件内部的写法，虽然不直接触发Hook报错，但会导致导航链接的路由上下文丢失，需将Router提升到项目根组件的最外层。修正后的核心代码如下：

  // Mobile_Navbar.jsx 修正版
  import React, { Component } from 'react';
  import {
    MDBNavbar,
    MDBNavbarBrand,
    MDBNavbarNav,
    MDBNavItem,
    MDBNavLink,
    MDBNavbarToggler,
    MDBCollapse,
    MDBContainer
  } from 'mdbreact';
  
  class MobileNavbar extends Component {
    state = {
      collapseID: ''
    };
  
    toggleCollapse = collapseID => () => {
      this.setState(prevState => ({
        collapseID: prevState.collapseID !== collapseID ? collapseID : ''
      }));
    };
  
    render() {
      return (
        <MDBContainer>
          <MDBNavbar color='light-blue lighten-4' style={{ marginTop: '20px' }} light>
            <MDBContainer>
              <MDBNavbarBrand>Navbar</MDBNavbarBrand>
              <MDBNavbarToggler onClick={this.toggleCollapse('navbarCollapse1')} />
              <MDBCollapse id='navbarCollapse1' isOpen={this.state.collapseID} navbar>
                <MDBNavbarNav left>
                  <MDBNavItem active>
                    <MDBNavLink to='/'>Home</MDBNavLink>
                  </MDBNavItem>
                  <MDBNavItem>
                    <MDBNavLink to='/link'>Link</MDBNavLink>
                  </MDBNavItem>
                  <MDBNavItem>
                    <MDBNavLink to='/profile'>Profile</MDBNavLink>
                  </MDBNavItem>
                </MDBNavbarNav>
              </MDBCollapse>
            </MDBContainer>
          </MDBNavbar>
        </MDBContainer>
      );
    }
  }
  
  export default MobileNavbar;
  

  // App.js 修正版
  import React from 'react';
  import { BrowserRouter as Router } from 'react-router-dom';
  import './App.css';
  import MobileNavbar from './components/Mobile_Menu/Mobile_Navbar';
  
  function App() {
    return (
      <Router>
        <div className="App">
          <MobileNavbar />
        </div>
      </Router>
    );
  }
  
  export default App;
  

完成所有步骤后启动项目开发服务，如果不再触发无效Hook调用报错，即修复完成。如果仍有报错，检查项目构建配置中是否将React设置为全局外部依赖，导致本地安装的React实例与全局加载的React不统一。

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