我的应用（登录形式）不能像spa页面那样工作

能像spa页面那样工作"/>

我的应用（登录形式）不能像spa页面那样工作

我使用CRA创建简单的登录表单。我已经用猫鼬建立了数据库，并用node构建了crud。我认为这与后端无关。我打算用这个小样板：（未登录）->登陆页面显示“欢迎”，显示首页，登录菜单。（已登录）->登陆页面通过“首页”，“我的页面”菜单显示“欢迎使用，名称”。

下面是Login.js。

import React, { useState } from "react";
import { Link } from "react-router-dom";
import axios from "axios";
import "../App.css";

function Login() {
  const [Email, setEmail] = useState("");
  const [Password, setPassword] = useState("");
  const [Error, setError] = useState("");

  const onEmailHandler = (e) => {
    setEmail(e.currentTarget.value);
  };

  const onPasswordHandler = (e) => {
    setPassword(e.currentTarget.value);
  };

  const onSubmitHandler = (e) => {
    e.preventDefault();
    const body = {
      email: Email,
      password: Password,
    };

    axios
      .post("/api/users/login", body)
      .then((response) => {
        if (!response.data.token) {
          setError(response.data.error);
        } else {
          window.location.replace("/");
          //props.history.push("/");
        }
      })
      .catch((e) => {
        console.log(e);
      });
  };
  return (
    <div>
      <div>
        <form className="login_form">
          <input
            type="email"
            placeholder="Email"
            onChange={onEmailHandler}
            value={Email}
          />
          <br />
          <input
            type="password"
            placeholder="Password"
            onChange={onPasswordHandler}
            value={Password}
          />
          <br />
          <button onClick={onSubmitHandler}>Login</button>
        </form>
      </div>
      <div
        style={{
          marginTop: 14,
          fontSize: 15,
          color: "red",
          fontFamily: "Arial",
          fontWeight: "lighter",
        }}
      >
        {Error}
      </div>

      <div className="register_button">
        <Link to="/register">Sign Up</Link>
      </div>
    </div>
  );
}

export default Login;

如您所见，正确登录后，您将被带到登录页面。着陆页看起来像这样。

import React, { useState } from "react";
import "../App.css";
import axios from "axios";

function Landing() {
  const [Nickname, setNickname] = useState("");
  axios.get("/api/users/authenticate").then((response) => {
    if (response.data.name) {
      setNickname(response.data.name);
    }
  });

  return Nickname === "" ? (
    <div className="welcome_msg">
      <h4>Welcome!</h4>
    </div>
  ) : (
    <div className="welcome_msg">
      <h4>Welcome, {Nickname}!</h4>
    </div>
  );
}

export default Landing;

最重要的是，App.js看起来像下面的样子。

import React, { useEffect, useState } from "react";
import { Route, BrowserRouter, Link } from "react-router-dom";
import "./App.css";
import axios from "axios";
import Landing from "./components/Landing";
import Login from "./components/Login";
import MyPage from "./components/MyPage";
import Register from "./components/Register";
function App() {
  const [IsLoggedIn, setIsLoggedIn] = useState(false);

  axios.get("/api/users/authenticate").then(
    (response) => {
      if (response.data.email) {
        setIsLoggedIn(true);
      } else {
        setIsLoggedIn(false);
      }
      console.log(IsLoggedIn);
    }
    //[IsLoggedIn]
  );

  return IsLoggedIn ? (
    <BrowserRouter>
      <nav className="navigate">
        <Link to="/">Home</Link>
        <Link to="/mypage">Mypage</Link>
        <hr />
      </nav>
      <Route exact path="/" component={Landing} />
      <Route path="/login" component={Login} />
      <Route path="/mypage" component={MyPage} />
      <Route path="/register" component={Register} />
    </BrowserRouter>
  ) : (
    <BrowserRouter>
      <nav className="navigate">
        <Link to="/">Home</Link>
        <Link to="/login">Sign in</Link>
        <hr />
      </nav>
      <Route exact path="/" component={Landing} />
      <Route path="/login" component={Login} />
      <Route path="/mypage" component={MyPage} />
      <Route path="/register" component={Register} />
    </BrowserRouter>
  );
}

export default App;

路由器api / user / authenticate返回带有用户信息（电子邮件，名称，令牌）的json。

这并不是应用程序有错误，但是我认为它可能被重新渲染了太多次？它很慢，不能像spa页面一样工作。我检查了“网络”标签，每当我转到“主页”或“我的页面”时，似乎请求过多（主要是身份验证）。

保持安全，远离病毒，请提供帮助：（

这是因为提交处理程序必须作为onSubmit方法而不是按钮的onClick传递给表单本身。

<form className="login_form" onSubmit={onSubmitHandler}>
 ...
</form>