React Logout Redirect From Nav Component - reactjs

Question

I have my navigation component here:
import 'navigations/NavMenu.scss';
import React, { Component } from 'react';
import { Collapse, Container, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from 'reactstrap';
import { Link } from 'react-router-dom';
import { useHistory } from 'react-router-dom';
import { Util } from 'helpers/Util';
export class NavMenu extends Component {
static displayName = NavMenu.name;
constructor(props) {
super(props);
this.toggleNavbar = this.toggleNavbar.bind(this);
this.closeNavbar = this.closeNavbar.bind(this);
this.logout = this.logout.bind(this);
this.state = {
collapsed: true
};
}
toggleNavbar() {
this.setState({
collapsed: !this.state.collapsed
});
}
closeNavbar() {
if (!this.state.collapsed)
this.setState({ collapsed: true });
}
async logout() {
const history = useHistory();
let success = await Util.logout();
if (success) {
history.push('/login?msg=' + encodeURI('Success! You have been logged-out.') + '&type=success');
}
this.closeNavbar();
}
render() {
let theme = localStorage.getItem('theme');
let navbarClass = "navbar navbar-expand-sm navbar-toggleable-sm ng-white border-bottom box-shadow mb-3";
let login = Util.isUserLoggedIn() ?
<NavLink onClick={this.logout} tag={Link} className={theme == 'dark' ? 'text-light' : 'text-dark'} to="/login">Logout</NavLink> :
<NavLink onClick={this.closeNavbar} tag={Link} className={theme == 'dark' ? 'text-light' : 'text-dark'} to="/login">Login</NavLink>
return (
<header>
<nav className={theme == 'dark' ? navbarClass + ' navbar-dark' : navbarClass + 'navbar-light'}>
<Container>
<NavbarBrand tag={Link} to="/">NetCoreReact</NavbarBrand>
<NavbarToggler onClick={this.toggleNavbar} className="mr-2" />
<Collapse className="d-sm-inline-flex flex-sm-row-reverse" isOpen={!this.state.collapsed} navbar>
<ul className="navbar-nav flex-grow">
<NavItem>
<NavLink onClick={this.closeNavbar} tag={Link} className={theme == 'dark' ? 'text-light' : 'text-dark'} to="/">Home</NavLink>
</NavItem>
<NavItem>
<NavLink onClick={this.closeNavbar} tag={Link} className={theme == 'dark' ? 'text-light' : 'text-dark'} to="/counter">Counter</NavLink>
</NavItem>
<NavItem>
<NavLink onClick={this.closeNavbar} tag={Link} className={theme == 'dark' ? 'text-light' : 'text-dark'} to="/fetch-data">Fetch data</NavLink>
</NavItem>
<NavItem>
{login}
</NavItem>
</ul>
</Collapse>
</Container>
</nav>
</header>
);
}
}
I want to logout() by pressing logout navigation link. But the useHistory() messes me up here. This is the error:
Unhandled Rejection (Error): Invalid hook call. Hooks can only be
called inside of the body of a function component. This could happen
for one of the following reasons:
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app See .... for tips about how to debug and
fix this problem.
When this code is called:
history.push('/login?msg=' + encodeURI('Success! You have been logged-out.') + '&type=success');
How can I safely navigate?

Answer 1

This is not a direct solution however just want to share this approach.
I was facing similar kind of issue in approaching a login and logout. I followed this approach and it works for me. I have used 'react-bootstrap' unlike 'reactstrap' in your code
ReactJS Bootstrap Navbar and Routing not working together
and you can use Redirect from 'react-router-dom'
import { Redirect, Route, Switch, Link } from "react-router-dom"
and use the Redirect in render method of the logout component like I did for Login component (I am redirecting to home based on a state of the component),
<Route path='/login'
exact
render = {()=>(this.state.bLoggedIn ? <Redirect to="/home" /> :
<>
<Login usr={this.getActiveUser}/>
</>
)}
/>