使用useState，React时无效的Hook调用

Question

我第一次遇到的问题很少。我正在尝试使用一个简单的useState，但是由于某种原因，我不明白为什么React会向我抛出错误以及我想做的任何事情，而无所事事。

这是错误的图像： 错误说明：

  

错误：无效的挂接调用。挂钩只能在功能组件的主体内部调用。可能由于以下原因之一而发生：   1.您的React和渲染器版本可能不匹配（例如React DOM）   2.您可能违反了《钩子规则》   3.您可能在同一应用中拥有多个React副本

我的代码：（非常简单）

import React, {useState} from "react";

function Login() {
    const [user, setUser] = useState({});


  return <div> why error? </div>;
}
export default Login;

尝试了他们的解决方案，没有成功的运气...谢谢

编辑：这是我渲染组件的地方-

import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Home from "./components/Home";
import Contact from "./components/Contact";
import Login from "./components/Login";
import Register from "./components/Register";
import NotFound from "./components/NotFound";
import Navbar from "./components/Navbar";
function App() {
  return (
    <Router>
      <div className="App">
        <Navbar />
        <Switch>
          <Route path="/" exact render={Home} />
          <Route path="/contact" exact component={Contact} />
          <Route path="/login" exact render={Login} />
          <Route path="/register" exact render={Register} />
          <Route render={NotFound} />
        </Switch>
      </div>
    </Router>
  );
}
...

Answer 1

这里的问题是如何呈现组件。您不能做：

Login()

但您可以这样做：

<Login />

更新：类似地，您不能这样做：

<Route path="/login" exact render={Login} />

您需要：

<Route path="/login" exact render={() => <Login />} />

Answer 2

该函数本身没有错误。在其他文件的另一个组件中对此进行了尝试。检查其他地方的错误。代码中的其他40行是什么？

React的版本是什么？