React18报错Invalid hook call：Hooks仅能在函数组件内调用

问题描述 #

我是React初学者，遇到Hooks相关报错无法自行解决，具体报错信息为：
react.development.js:207 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component
官方说明该报错通常由三类原因导致：

• React与React DOM等渲染器版本不匹配
• 代码编写违反Hooks调用规则
• 同一应用中存在多份React副本

项目相关代码与资源 #

App.js 代码 #

import NavBar from "./components/NavBar";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { Home } from "./components/Pages/Home";
import { About } from "./components/Pages/About";
import { Blog } from "./components/Pages/Blog";
import { Contact } from "./components/Pages/Contact";


function App() {
  return (
      <Router>
        <NavBar />

        <div className="pages">
          <Routes>
            <Route exact path="/" element={<Home/>} />
            <Route path="/about" element={<About/>} />
            <Route path="/blog" element={<Blog/>} />
            <Route path="/contact" element={<Contact/>} />
          </Routes>
        </div>
      </Router>
  );
}
export default App;

初始报错截图

NavBar.js 代码 #

import React, { useState } from "react";
import { NavLink } from "react-router-dom";
import "./NavBar.css";

NavBar()

export default function NavBar() {
  const [click, setClick] = useState(false);

  const handleClick = () => setClick(!click);
  return (
    <>
      <nav className="navbar">
        <div className="nav-container">
          <NavLink exact to="/" className="nav-logo">
            CodeBucks
            <i className="fas fa-code"></i>
          </NavLink>

          <ul className={click ? "nav-menu active" : "nav-menu"}>
            <li className="nav-item">
              <NavLink
                exact
                to="/"
                activeClassName="active"
                className="nav-links"
                onClick={handleClick}
              >
                Home
              </NavLink>
            </li>
            <li className="nav-item">
              <NavLink
                exact
                to="/about"
                activeClassName="active"
                className="nav-links"
                onClick={handleClick}
              >
                About
              </NavLink>
            </li>
            <li className="nav-item">
              <NavLink
                exact
                to="/blog"
                activeClassName="active"
                className="nav-links"
                onClick={handleClick}
              >
                Blog
              </NavLink>
            </li>
            <li className="nav-item">
              <NavLink
                exact
                to="/contact"
                activeClassName="active"
                className="nav-links"
                onClick={handleClick}
              >
                Contact Us
              </NavLink>
            </li>
          </ul>
          <div className="nav-icon" onClick={handleClick}>
            <i className={click ? "fas fa-times" : "fas fa-bars"}></i>
          </div>
        </div>
      </nav>
    </>
  );
}

现象：删除NavBar.js中顶层的NavBar()调用语句后，出现更多报错
删除顶层调用后的报错截图
package.json截图

index.js 入口文件代码 #

import React from 'react';
import ReactDOM from 'react-dom/client';
// import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);

根因定位 #

1. 初始Invalid Hook Call报错直接原因：NavBar.js顶层存在误写的NavBar()孤立调用。模块首次被导入时就会直接执行该调用，此时组件未进入React渲染调度流程，函数内部的useState属于在函数组件上下文外调用Hooks，违反Hooks调用规则，直接触发报错。
2. 删除NavBar()后新增报错原因：从package.json可确认项目安装的react-router-dom为v6版本，该版本已移除NavLink组件的activeClassName属性，代码中残留的v5版本写法会触发属性不兼容错误。v6版本下NavLink默认会给路由匹配的链接添加active类名，不需要额外指定。

修复步骤 #

• 删除NavBar.js中顶层无意义的NavBar()调用语句。
• 移除NavBar.js里所有NavLink组件上的activeClassName="active"属性，原有针对.active类的CSS样式不需要修改，可直接生效。
• 若完成上述操作后仍存在Hooks相关报错，在项目根目录执行以下命令检查是否存在多副本React：

  npm ls react
  

  若输出显示存在多个版本的React依赖，删除node_modules文件夹和包锁定文件（package-lock.json/yarn.lock/pnpm-lock.yaml）后重新执行依赖安装命令即可。

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