当我在 React 中单击链接组件时如何重新加载页面？

Question

I'm making a Logout function with reactJS. When I click Logout button, the token of the localstorage is deleted. But, although the localstroage is deleted, my header can't notice the change before I reload the page.(When the page is root page "/". If the page is not root page, it works well.) How can I solve this??

<Link to="/" onClick={AuthenticationService.logout} className="headerBtn">
     logout
</Link>

logout() {
     localStorage.removeItem("authenticatedUser");
     localStorage.removeItem("token");
         }

Answer 1

Are you sure you want to reload the whole page or just render it again, following this change in state?

re-render is much faster than browser reload, because it will only update the needed parts instead of reopening your whole web app again.

If you do have react's state where you could keep an indication whether a user is logged in or not, then calling setState() within your logout() function would re-render your view.