React-router-dom使用MDBbootstrap给出了无效的钩子错误

Question

我正在将MDBootStrap组件与带有Hooks的React Router库一起使用：

我收到此错误：

无效的挂钩调用。挂钩只能在功能组件的主体内部调用。可能由于以下原因之一而发生这种情况...

我有checked，如错误描述中所建议：

npm ls react返回react@16.8.6，因此我只使用一个版本的react，它是> 16.8.x

package.json：

  "name": "counter-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "bootstrap": "^4.1.1",
    "mdbreact": "^4.21.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

RegisterPage.jsx：

import React, { useState } from "react";
import {
  MDBNavbar,....
from "mdbreact";
import "../index.css";
const ClassicFormPage = () => {
  const [collapseID, setCollapseID] = useState("");

  const toggleCollapse = collapseID => () =>
    setCollapseID(prevState => ({
      collapseID: prevState.collapseID !== collapseID ? collapseID : ""
    }));

  const overlay = (
    <div
      id="sidenav-overlay"
      style={{ backgroundColor: "transparent" }}
      onClick={toggleCollapse("navbarCollapse")}
    />
  );

  return (
    <div id="classicformpage">
      <div>
        <MDBNavbar dark expand="md" fixed="top">
......
</MDNNavbar>
</div>
</div>
);
};

export default ClassicFormPage;

我在index.js中引用的App.js是

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route
} from 'react-router-dom';
import ClassicFormPage from './components/counters';


const App = () => {
  return ( <Router >
    <
    Switch >
    <
    Route exact path = "/"
    render = {
      ClassicFormPage
    }
    />  <
    /Switch> <
    /Router>
  );
};

export default App;

在这一点上，如果我启动应用程序，它会因错误而中断

如果我直接在app.js内部返回组件，则它可以正常工作：

const App = () => {
  return ( 
      ClassicHomePage
    }
    />  <
    /Switch> <
    /Router>
  );
};

我在浏览器中看到此消息：

invariant
E:/Practice/Mosh/counter-app/node_modules/react-dom/cjs/react-dom.development.js:57
throwInvalidHookError
E:/Practice/Mosh/counter-app/node_modules/react-dom/cjs/react-dom.development.js:13382
useState
E:/Practice/Mosh/counter-app/node_modules/react/cjs/react.development.js:1495
▲ 3 stack frames were expanded.
ClassicFormPage
http://localhost:3000/static/js/main.chunk.js:117:75
  20 | } from "mdbreact";
  21 | import "../index.css";
  22 | 
> 23 | const ClassicFormPage = () => {
  24 |   const [collapseID, setCollapseID] = useState("");
  25 | 
  26 |   const toggleCollapse = collapseID => () =>