Question

我的index.js文件中有一个Hook的错误。通常，index.js文件仍然是默认文件。我不知道如何解决这个错误。

这是错误：

Error: Invalid hook call. Hooks can only be called inside of 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/warnings/invalid-hook-call-warning.html][1] for tips about how to debug and fix this problem.
./src/index.js
I:XXX/index.js:8

   5 | import * as serviceWorker from "./serviceWorker";
   6 | import { BrowserRouter } from "react-router-dom";
   7 | 
>  8 | ReactDOM.render(
   9 |   <BrowserRouter>
  10 |     <App />
  11 |   </BrowserRouter>,

这是index.js文件：

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

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: XXX
serviceWorker.unregister();

我的环境与我的同事完全相同，并且对他们有用。我已经尝试过重新启动环境，在其他浏览器上启动，但是问题仍然存在。

Answer 1

使用提供的信息，您好像在Class组件中使用了react钩子，这是不允许的。挂钩只能在功能组件中使用。

检查App或BrowserRouter是否是类组件，并且您试图在这些类组件中使用任何挂钩调用。

请遵循link以获得更多信息。

如果您共享更多代码，将会很有帮助。

如何解决index.js文件中的Hook错误？

1 个答案: