React页面空白+多次Invalid hook call错误（BrowserRouter组件）求助

问题现象 #

页面空白，控制台重复4次弹出警告：

react.development.js:209 Warning: Invalid hook call. Hooks can only be called inside  
the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this 
problem.

同时出现1次错误提示：

The above error occurred in the <BrowserRouter> component:
at BrowserRouter (http://localhost:3001/static/js/bundle.js:5177:5)
at App (http://localhost:3001/static/js/bundle.js:44:74)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

依赖检查结果 #

执行npm ls react输出：

PS C:\Users\MAHELAKA\React> npm ls react       
React@ C:\Users\MAHELAKA\React
└─┬ react-router-dom@6.10.0
├─┬ react-dom@18.2.0
│ └── react@18.2.0 deduped
├─┬ react-router@6.10.0
│ └── react@18.2.0 deduped
└── react@18.2.0

代码示例（App.js） #

import "./App.css";
import Alert from "./components/Alert";
import About from "./components/About";
import Navbar from "./components/Navbar";
import TextForm from "./components/TextForm";
import React, { useState } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";

function App(props) {
const [mode, setMode] = useState("light");
const [alert, setAlert] = useState(null);

const showAlert = (message, type) => {
  setAlert({
  msg: message,
  type: type,
 });
 setTimeout(() => {
  setAlert(null);
 }, 2000);
};

const toggleMode = () => {
if (mode === "light") {
  setMode("dark");
  document.body.style.backgroundColor = "#011121";
  document.body.style.color = "white";
  showAlert("dark mode has been enabled", "success");
  document.title = "TextUtils - Dark Mode";
} 
  else {
  setMode("light");
  document.body.style.backgroundColor = "white";
  document.body.style.color = "black";
  showAlert("white mode has been enabled", "success");
  document.title = "TextUtils - Light Mode";
   }
};

 return (
  <>
  <BrowserRouter>
    <Navbar
      title="TextUtils"
      mode={mode}
      toggleMode={toggleMode}
      aboutText="About"
    />
    <Alert alert={alert} />
    <div className="container my-3">
      <Routes>
        <Route path="/about" element={<About />} />

        <Route
          path="/"
          element= { <TextForm showAlert={showAlert}  heading="Enter The Text To Analyze 
     Below" mode={mode} />
          }
        />
      </Routes>
    </div>
  </BrowserRouter>
</>
);
}

export default App;

解决方案 #

1. 彻底清理并重装依赖 #

虽然npm ls react显示版本已合并，但node_modules中可能存在隐藏的多份React副本，执行以下步骤：

• 删除项目根目录下的node_modules文件夹
• 删除package-lock.json或yarn.lock文件
• 运行npm install重新安装所有依赖

2. 检查自定义组件的Hook使用 #

错误指向BrowserRouter，但也可能是自定义组件（Navbar/Alert/TextForm/About）违反Hook规则：

• 确保所有Hook（如useState/useEffect）只在函数组件的顶层调用
• 不要在循环、条件判断或嵌套函数中调用Hook
• 检查组件是否被错误地作为类组件使用，或者在非组件函数中调用Hook

3. 强制项目使用单一React实例（Webpack配置） #

如果使用Create React App，可通过react-app-rewired添加别名配置；如果是自定义Webpack配置，在webpack.config.js中添加：

resolve: {
  alias: {
    'react': path.resolve(__dirname, 'node_modules/react'),
    'react-dom': path.resolve(__dirname, 'node_modules/react-dom')
  }
}

这会强制所有依赖使用项目根目录下的React版本。

4. 检查是否存在嵌套node_modules #

检查项目中是否有子目录包含独立的node_modules（比如某个自定义组件库文件夹），如果有，删除该子目录下的node_modules和lock文件，确保所有依赖统一由根目录管理。

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