1

I am building a login and logout system for a react project of mine. I have a navbar setup and I am using react-redirect-dom to create links and redirect links to different pages in order to manage the login system.

In the current project, I have a route that does the processing for the login in the login component. I have another link that processes the signup within the signup component.

For the logout, If a user is logged in and they use the /logout endpoint, I want it to immediately call the handleLogout function and log the user out and reroute to the / endpoint

Here is the code I have and the 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>
  );
}

Here is the 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.

**************** UPDATE ***********************

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>
  )
}

1 Answer 1

1

In react-router-dom version 6 the Route components take an element prop that takes only a ReactElement, a.k.a. JSX. Passing a function here is invalid, as the warning points out.

Refactor your logout logic into a component in a mounting useEffect hook. Invoke the passed handleLogout function and then imperatively redirect to the home "/" path.

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>
4
  • Okay so what you are saying is to create a logout component and add the Logout method you added into the logout component. Then when logout is clicked it will call the handleLogout and then redirect to the / Commented Jan 17, 2022 at 19:13
  • @omarjandali Affirmative. This is because the element prop takes only valid JSX as a value. navigate is a void function, it doesn't return any JSX to render.
    – Drew Reese
    Commented Jan 17, 2022 at 20:39
  • Okay, so would the logout component look like what I am adding to the original quesiton?? or is the Logout component just the block you have?? Commented Jan 17, 2022 at 21:29
  • @omarjandali Mine. Or yours if you unnest the Logout component from the Logout component and use that instead.
    – Drew Reese
    Commented Jan 17, 2022 at 22:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.