React 18.2.0中BrowserRouter引发无效Hook调用错误的原因咨询

添加BrowserRouter组件后代码编译成功，但浏览器抛出警告：

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component

移除BrowserRouter后代码可正常运行。已确认React与React DOM版本一致、重新安装过npm，且代码中无无效Hook调用，求问题原因。

App.js #

import './App.css';

export default function App() {
  return (
    <div>
      <h1>Hello world</h1>
    </div>
  );
}

index.js #

import * as React from "react";
import { createRoot } from 'react-dom/client';
import { BrowserRouter } from "react-router-dom";
import "./index.css";
import App from "./App";
//import * as serviceWorker from "./serviceWorker";

const container = document.getElementById('root');
const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render(
  <BrowserRouter>
   < App/>
  </BrowserRouter>,
);

• react-router-dom与React版本不兼容：不同版本的react-router-dom对React版本有最低要求，比如react-router-dom v6需要React 16.8及以上版本，若你的React版本低于这个要求，就会触发Hook调用错误。可以查看package.json里的版本号，确认两者版本匹配。
• 项目中存在多个React实例：如果node_modules里嵌套了多个React包（比如子依赖又安装了一份React），会导致BrowserRouter使用的React实例和你的组件使用的不是同一个，Hook调用就会失效。可以运行npm ls react查看输出，若出现多个版本，删除node_modules和package-lock.json后重新执行npm install。
• 全局安装的React与项目本地版本冲突：如果全局安装了React，可能和项目本地的React版本不一致，导致实例不统一。尽量使用项目本地的依赖，避免全局安装影响。

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