My react app (login form) doesn't work like a spa page - node.js

Question

I used CRA to create simple Login form. I've set up database with mongoose and built crud with node.
I don't think it has anything to do with the backend.
My intention with this little boiler plate was:
(not logged in) -> landing page shows 'Welcome' with Home, sign in menu.
(logged in) -> landing page shows 'Welcome, name' with Home, MyPage menu.
Down below is 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;
As you can see, when you are signed in properly you are thrown to the landing page.
landing page looks like this.
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;
And most importantly, App.js looks like down below.
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;
The Router api/user/authenticate returns json with user information(email, name, token).
It's not like there's an error to the app, but I think maybe it's re-rendered too many times? It's slow and doesn't work like a spa page. I've checked the network tab and there seems to be too many requests (mostly authentication) whenever i go to Home or Mypage.
Stay safe, stay away from virus and please help :(

Answer 1

That's because the submit handler must be passed to the form itself as an onSubmit method instead of the onClick of the button.
<form className="login_form" onSubmit={onSubmitHandler}>
...
</form>