使用useState时无效的钩子调用，React

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 />} />