Cada vez que visito la ruta "/" y voy a la sección de red para inspeccionar, veo un montón de solicitudes que van a "/api/checkauth". Solo llamo a la solicitud "/api/checkauth" una vez, cuando visito la ruta "/". Tal vez tenga algo que ver con element={...} . No sé cómo solucionar este problema.
Esto es lo que veo en la sección de red cuando la visito una vez
import './App.css'; import { React, useState } from "react"; import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; import Login from "./components/Login"; import Signup from "./components/Signup"; import Feed from "./components/User/Feed"; import UserProfile from "./components/User/UserProfile"; const axios = require("axios"); function App() { const [isAuth, setAuth] = useState(false); const checkAuthHome = () => { axios.post("http://localhost:5000/api/checkauth", {}, { withCredentials: true }) .then((response) => { setAuth(response.data.status);; }); if (isAuth === true) { return (<Feed />); } else { return (<Login />); } } return ( <div className="App"> <Router> <Routes> <Route exact path="/" element={checkAuthHome()}/> <Route exact path="/signup" element={<Signup />}/> <Route exact path="/users/:id" element={<UserProfile />}/> </Routes> </Router> </div> ); } export default App;No debe obtener datos en el renderizado de componentes. Intenta usar useEffect :
function App() { const [isAuth, setAuth] = useState(false); useEffect(()=>{ axios.post("http://localhost:5000/api/checkauth", {}, { withCredentials: true }) .then((response) => { setAuth(response.data.status);; }); }, []) const checkAuthHome = () => { if (isAuth === true) { return (<Feed />); } else { return (<Login />); } } return ( <div className="App"> <Router> <Routes> <Route exact path="/" element={checkAuthHome()}/> <Route exact path="/signup" element={<Signup />}/> <Route exact path="/users/:id" element={<UserProfile />}/> </Routes> </Router> </div> ); }