DEV Community

Discussion on: Implementing client-side logout with React Router V4

View post
Collapse
 
gavinschriver profile image
gavinschriver • • Edited

I made a dev account just to say thank you for this! Brand new to React (in a software bootcamp course rn) and was looking for a way to do this without using a <Link> to a <Route> component which was how we were taught but had the weird effect of flashing a "/logout" endpoint in the URL. I adapted this to hook-based functional component use 'cause they didn't bother teaching us classes at all.

export const LogoutButton = () => {

  const [loggedOut, setLoggedOut] = useState(false)

  const logout = () => {
    localStorage.removeItem("whpf_user")
    setLoggedOut(true)

  };

  if (loggedOut) {
    return <Redirect to="/login" push={true} />
  }

  return <Button onClick={logout}>LogOut</Button>;
};
Enter fullscreen mode Exit fullscreen mode
Collapse
 
calier profile image
Calie Rushton • • Edited

Gavin, THANK YOU!!!

I have neglected this account for a while (especially the comments) but I'm really pleased to get your message and I'm so glad I could help. I'm honoured that you created your account to make a comment :)

Also it's really cool to see you used a functional component with a hook - hooks weren't a thing when I was at bootcamp so I missed out on those, hence the class component.

Hopefully you are still using the platform, sorry it took me 2 years to get back to you but better late than never right?!?!?!

Calie