title: My react app (login form) doesn't work like a spa page
body: <p>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.</p>
  
  <p>Down below is Login.js. </p>
  
  <pre><code>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) =&gt; {
      setEmail(e.currentTarget.value);
    };
  
    const onPasswordHandler = (e) =&gt; {
      setPassword(e.currentTarget.value);
    };
  
    const onSubmitHandler = (e) =&gt; {
      e.preventDefault();
      const body = {
        email: Email,
        password: Password,
      };
  
      axios
        .post("/api/users/login", body)
        .then((response) =&gt; {
          if (!response.data.token) {
            setError(response.data.error);
          } else {
            window.location.replace("/");
            //props.history.push("/");
          }
        })
        .catch((e) =&gt; {
          console.log(e);
        });
    };
    return (
      &lt;div&gt;
        &lt;div&gt;
          &lt;form className="login_form"&gt;
            &lt;input
              type="email"
              placeholder="Email"
              onChange={onEmailHandler}
              value={Email}
            /&gt;
            &lt;br /&gt;
            &lt;input
              type="password"
              placeholder="Password"
              onChange={onPasswordHandler}
              value={Password}
            /&gt;
            &lt;br /&gt;
            &lt;button onClick={onSubmitHandler}&gt;Login&lt;/button&gt;
          &lt;/form&gt;
        &lt;/div&gt;
        &lt;div
          style={{
            marginTop: 14,
            fontSize: 15,
            color: "red",
            fontFamily: "Arial",
            fontWeight: "lighter",
          }}
        &gt;
          {Error}
        &lt;/div&gt;
  
        &lt;div className="register_button"&gt;
          &lt;Link to="/register"&gt;Sign Up&lt;/Link&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  export default Login;
  </code></pre>
  
  <p>As you can see, when you are signed in properly you are thrown to the landing page.
  landing page looks like this.</p>
  
  <pre><code>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) =&gt; {
      if (response.data.name) {
        setNickname(response.data.name);
      }
    });
  
    return Nickname === "" ? (
      &lt;div className="welcome_msg"&gt;
        &lt;h4&gt;Welcome!&lt;/h4&gt;
      &lt;/div&gt;
    ) : (
      &lt;div className="welcome_msg"&gt;
        &lt;h4&gt;Welcome, {Nickname}!&lt;/h4&gt;
      &lt;/div&gt;
    );
  }
  
  export default Landing;
  </code></pre>
  
  <p>And most importantly, App.js looks like down below.</p>
  
  <pre><code>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) =&gt; {
        if (response.data.email) {
          setIsLoggedIn(true);
        } else {
          setIsLoggedIn(false);
        }
        console.log(IsLoggedIn);
      }
      //[IsLoggedIn]
    );
  
    return IsLoggedIn ? (
      &lt;BrowserRouter&gt;
        &lt;nav className="navigate"&gt;
          &lt;Link to="/"&gt;Home&lt;/Link&gt;
          &lt;Link to="/mypage"&gt;Mypage&lt;/Link&gt;
          &lt;hr /&gt;
        &lt;/nav&gt;
        &lt;Route exact path="/" component={Landing} /&gt;
        &lt;Route path="/login" component={Login} /&gt;
        &lt;Route path="/mypage" component={MyPage} /&gt;
        &lt;Route path="/register" component={Register} /&gt;
      &lt;/BrowserRouter&gt;
    ) : (
      &lt;BrowserRouter&gt;
        &lt;nav className="navigate"&gt;
          &lt;Link to="/"&gt;Home&lt;/Link&gt;
          &lt;Link to="/login"&gt;Sign in&lt;/Link&gt;
          &lt;hr /&gt;
        &lt;/nav&gt;
        &lt;Route exact path="/" component={Landing} /&gt;
        &lt;Route path="/login" component={Login} /&gt;
        &lt;Route path="/mypage" component={MyPage} /&gt;
        &lt;Route path="/register" component={Register} /&gt;
      &lt;/BrowserRouter&gt;
    );
  }
  
  export default App;
  </code></pre>
  
  <p>The Router api/user/authenticate returns json with user information(email, name, token). </p>
  
  <p>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.</p>
  
  <p>Stay safe, stay away from virus and please help :(</p>