Estoy construyendo un sistema de inicio y cierre de sesión para un proyecto mío de reacción. Tengo una configuración de barra de navegación y estoy usando react-redirect-dom para crear enlaces y redirigir enlaces a diferentes páginas para administrar el sistema de inicio de sesión.
En el proyecto actual, tengo una ruta que procesa el inicio de sesión en el componente de inicio de sesión. Tengo otro enlace que procesa el registro dentro del componente de registro.
Para el cierre de sesión, si un usuario ha iniciado sesión y usa el punto final /logout , quiero que llame inmediatamente a la función handleLogout y cierre la sesión del usuario y lo redirija al punto final /
Aquí está el código que tengo y el error:
function App() { const [loggedIn, setLoggedIn] = useState(false) const [currentUser, setCurrentUser] = useState('') function handleLogout() { console.log('handle logout') axios.post('/api/auth/logout', { "username":currentUser.username, "password":currentUser.password, }) .then((data) => { console.log(data.data) setCurrentUser(data.data) setLoggedIn(false) return(<Navigate to='/' />) }) .catch((err) => { console.log(err) }) } return ( <div className="App"> {/* <ContentContext value={contentContextValue}> */} <BrowserRouter> <Routes> <Route exact path="/" element={loggedIn ? <Feed/> : <Login setLoggedIn={setLoggedIn} setCurrentUser={setCurrentUser}/>} /> <Route exact path="/login" element={<Login setLoggedIn={setLoggedIn} setCurrentUser={setCurrentUser}/>}/> <Route exact path="/signup" element={<Login setLoggedIn={setLoggedIn} setCurrentUser={setCurrentUser}/>}/> <Route exact path="/logout" element={loggedIn ? () => {handleLogout()} : <Login/>}/> </Routes> </BrowserRouter> {/* </ContentContext> */} </div> ); }Aquí está el error:
Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.**************** ACTUALIZAR ***********************
import React from 'react' export default function Logout(props) { const { handleLogout } = props const Logout = ({ handleLogout }) => { const navigate = useNavigate(); React.useEffect(() => { handleLogout(); navigate("/", { replace: true }); }, []); return null; }; return ( <div> </div> ) }En la versión 6 react-router-dom , los componentes de Route toman un accesorio de element que solo toma un ReactElement , también conocido como JSX. Pasar una función aquí no es válido, como señala la advertencia.
Refactorice su lógica de cierre de sesión en un componente en un useEffect de montaje. Invoque la función handleLogout pasada y luego redirija imperativamente a la ruta de inicio "/" .
const Logout = ({ handleLogout }) => { const navigate = useNavigate(); React.useEffect(() => { handleLogout(); navigate("/", { replace: true }); }, []); return null; };...
<Routes> <Route path="/" element={loggedIn ? <Feed /> : <Login setLoggedIn={setLoggedIn} setCurrentUser={setCurrentUser} /> } /> <Route path="/login" element={<Login setLoggedIn={setLoggedIn} setCurrentUser={setCurrentUser} />} /> <Route path="/signup" element={<Login setLoggedIn={setLoggedIn} setCurrentUser={setCurrentUser} />} /> <Route path="/logout" element={loggedIn ? <Logout handleLogout={handleLogout} /> : <Login /> } /> </Routes>