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

Question

我第一次遇到的问题很少。我正在尝试使用一个简单的 useState，但出于某种原因，我无法理解为什么 React 会向我抛出错误以及我试图做的任何事情都没有解决它。

那是错误的图像：错误描述：

错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一而发生的： 1. 你可能有不匹配的 React 版本和渲染器（例如 React DOM） 2. 你可能违反了 Hooks 规则 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 />} />