React JS Uncaught错误:钩子调用无效

Question

我有这个代码：

import { useState } from 'react';
import {
MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavItem, MDBNavLink, MDBNavbarToggler, MDBCollapse, MDBFormInline
} from "mdbreact";
import { BrowserRouter as Router } from 'react-router-dom';
import logo from '../static/logo.svg';
import PersonIcon from '@material-ui/icons/Person';
import PersonAddIcon from '@material-ui/icons/PersonAdd';
import VpnKeyIcon from '@material-ui/icons/VpnKey';
import ListIcon from '@material-ui/icons/List';
import '../App.css';

function Header() {

const [ isOpen, setIsOpen ] = useState(false);

const toggleCollapse = () => {
setIsOpen(!isOpen);
}

return ( 
<Router>
<MDBNavbar color="indigo" dark expand="md">
<MDBNavbarBrand>
<strong className="white-text"> <img src={logo} className="App-logo" alt="logo" /> </strong>
</MDBNavbarBrand>
<MDBNavbarToggler onClick={toggleCollapse} />
<MDBCollapse id="navbarCollapse3" isOpen={isOpen} navbar>
<MDBNavbarNav left>
<MDBNavItem active>
<MDBNavLink to="/crearusuario"> <PersonAddIcon /> Agregar </MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to="cambiarcontrasena"> <VpnKeyIcon /> Cambiar Contraseña </MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to="/usuarios"> <ListIcon /> Usuarios </MDBNavLink>
</MDBNavItem>
</MDBNavbarNav>
<MDBNavbarNav right>
<MDBNavItem>
<MDBFormInline waves>
<div className="md-form my-0"> 
<PersonIcon />
<p className="mb-auto pl-2 font-weight-bold" > Administrador </p>
</div>
</MDBFormInline>
</MDBNavItem>
</MDBNavbarNav>
</MDBCollapse>
</MDBNavbar> 
</Router>
);
}
export default Header;

但是我有这样的错误：js:1476未捕获错误：无效的钩子调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一：

1. React和渲染器的版本可能不匹配(例如React DOM(
2. 你可能违反了胡克规则
3. 同一应用程序中可能有多个React副本

我一直在检查它，但我找不到一些错误，我做错了什么？？

这里在codesandbox Proyect

Answer 1

复制的解决方案来自：React-错误：无效的钩子调用。钩子只能在功能组件的主体内部调用

当我们使用mdbootstrap库MDBNavLink组件时，似乎存在某种问题。不过，我并没有深入解释原因。

我通过从react router dom导入Link组件来解决这个问题，并将其与className='nav-Link'一起使用。

import { Link } from "react-router-dom";
//Snippet
// [....]
<MDBNavItem>
<Link
className='nav-link'
exact
to='/'
onClick={closeCollapse('mainNavbarCollapse')}
>
Home
</Link>
</MDBNavItem>
// [...]