O'Reilly logo

Progressive Web Apps with React by Scott Domes

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Logging out

Okay, we've handled our user logging in, but what about when they want to log out?

Let's build them a button at the top of ChatContainer to allow them to log out. It'll fit best in the Header component, so why don't we build it in there?

Well, hold up. We currently use the Header on our /login path, in the LoginContainer. If we add a Logout button, it'll appear on the sign-in screen as well, which is just confusing. We need a way to only render the Logout button on the ChatContainer.

We can take advantage of the Route history prop and use that to do a conditional rendering of the Logout button based on the URL (if the path is "/", render the button, otherwise don't!). However, that can be messy and hard to understand for future ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required