添加 React Router DOM 时出错：无效的钩子调用。 钩子只能在 function 组件的主体内部调用

Question

我是 React 的新手。 我只是在反应中创建了一个笔记应用程序。 一切都很好。 但是当我使用 React Router 时，我收到“错误：无效的钩子调用。只能在 function 组件的主体内部调用钩子”的错误。 它仅在我添加路由器时显示，如果我将其删除，则错误消失。 我还附上了截图。

我的app.js

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import "./App.css";
import Header from "./components/Header";
import NoteslistPages from "./pages/NoteslistPages";
import Footer from "./components/Footer";


 return (
    <Router>
      <div className="App">
        <Header />
        <Route path="/" exact component={NoteslistPages} />
        

        <Footer />
      </div>
    </Router>
  );
}

export default App;

Answer 1

您的代码不代表功能组件，并且如错误消息中所述，必须在其主体内调用挂钩。 也许您错误地删除了一些代码，因为您还有一个“}”括号，它什么都不关闭。

添加 function 声明，它应该可以正常工作：

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import "./App.css";
import Header from "./components/Header";
import NoteslistPages from "./pages/NoteslistPages";
import Footer from "./components/Footer";

function App() {

 return (
  <Router>
   <div className="App">
    <Header />
    <Route path="/" exact component={NoteslistPages} />
    <Footer />
   </div>
  </Router>
 );
}

export default App;