React Logout Redirect From Nav Component

Question

我的导航组件在这里:

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>
);
}
}

我想通过注销navigation link来退出logout()。但这里的useHistory()把我搞糊涂了。这是错误:

Unhandled Rejection (Error): Invalid hook call。钩子只能是在函数组件的内部调用。这是可能发生的出于以下原因之一:

1. 你可能有不匹配的版本的React和渲染器(如React DOM)
2. 你可能违反了Hooks的规则
3. 你可能在同一个应用程序中有多个React副本，参见....有关如何调试和

当这个代码被调用时:

history.push('/login?msg=' + encodeURI('Success! You have been logged-out.') + '&type=success');

我怎样才能安全地航行?

Answer 1

这不是一个直接的解决方案，但只是想分享这种方法。我在接近登录和注销时面临类似的问题。我遵循了这个方法，它对我很有效。我在你的代码中使用了'react-bootstrap'而不是'reactstrap'

ReactJS引导导航条和路由不能一起工作

，你可以使用Redirect from 'react-router-dom'

import { Redirect, Route, Switch, Link } from "react-router-dom"

并在logout组件的render方法中使用Redirect，就像我对Login组件所做的那样(我根据组件的状态重定向到home)，

<Route path='/login' 
exact
render = {()=>(this.state.bLoggedIn ? <Redirect to="/home" /> :  
<>
<Login usr={this.getActiveUser}/>
</>
)}
/>