Struggling to find a way to direct the user back to the Home component after logging out. The API functionality has been tested and is working properly.
I'm unsure how to properly implement the logout method in the current context to allow for successful logout and redirection to the Home component.
Currently, when clicking on Logout, the Grid component goes blank instead of redirecting to the Home component. How can this issue be resolved?
Below is the code snippet for App.js:
const App = () => {
return (
<>
<Router>
<Switch>
<Route exact path="/" component={Home} />
<ProtectedRoute path="/gallery" component={Grid} />
</Switch>
</Router>
</>
);
}
And here is the section from Navbar.js file:
import { Link as RouterLink } from "react-router-dom";
import { useHistory } from "react-router-dom";
const settings = ['Profile', 'Account', 'Gallery', 'Logout'];
let authToken = localStorage.getItem('token');
const settingsSelection = (settings) => {
switch (settings) {
case "Logout":
return "/";
}
};
const logout = () => {
const headers = {
"Accept": 'application/json',
"Authorization": `Bearer ${authToken}`
};
const data = "";
axios.post('http://127.0.0.1:8000/api/logout', data, {headers})
.then(resp => {
localStorage.removeItem('token');
history.push('/');
}).catch(err => {
console.log(err);
});
}
{settings.map((setting) => (
<MenuItem key={setting} onClick={handleCloseUserMenu}>
<Typography
textAlign="center"
component={RouterLink}
to={settingsSelection(setting)}
// onClick={logout()}
>
{setting}
</Typography>
</MenuItem>
))}