Reactjs 在React Redux应用程序中注销时重定向到登录页面时出现问题

注销时，我希望应用程序重定向到登录页面。当前，当我单击注销链接时，它仍然位于“/landPage”，但没有任何内容

我尝试过使用这个.props.history.push（'/login'）并用Router包装组件，但没有成功。我正在使用 链接，但这也不起作用

下一步我应该试试什么

navbar.js

class NavAuth extends Component {

    state = {}

    onLogout = e => {
        e.preventDefault();
        window.localStorage.clear();
        this.props.logoutUser();
        // this.props.history.push('/login');
    }

    render () {
        const { isAuthenticated, user } = this.props.auth;
    return (
        <Navbar bg="light" expand="sm">
          <Navbar.Toggle aria-controls="basic-navbar-nav"/>
          <Navbar.Collapse id="basic-navbar-nav">
           {isAuthenticated ? (
            <Nav className="ml-auto">
              <Link to="/chat">Chat</Link>
              <Link to="/login" onClick = {this.onLogout}>Logout</Link>
             </Nav> 
            ) :(
             <Nav className="ml-auto">
                <Link to="/registration">Registration</Link>
                <Link to="/login">Login</Link>
             </Nav>
            )}
            </Navbar.Collapse>
        </Navbar>
    )}
}

const mapStateToProps = state => ({
    auth: state.auth
  });

export default connect(
    mapStateToProps,
   {logoutUser}
  )(NavAuth);

类NavAuth扩展组件{
状态={}
onLogout=e=>{
e、 预防默认值（）；
window.localStorage.clear（）；
this.props.logoutUser（）；
//this.props.history.push（'/login'）；
}
渲染（）{
const{isAuthenticated，user}=this.props.auth；
返回(
{是否已验证(
聊天
注销
) :(
登记处
登录
)}
)}
}
常量mapStateToProps=状态=>({
auth:state.auth
});
导出默认连接(
MapStateTops，
{logoutUser}
)（NavAuth）；

以下是如何重定向到登录页面。您可以检查您的isAuthenticated是否为非真值

import { Redirect } from 'react-router-dom';
class NavAuth extends Component {

    state = {}

    onLogout = e => {
        e.preventDefault();
        window.localStorage.clear();
        this.props.logoutUser();
        // this.props.history.push('/login');
    }

    render () {
        const { isAuthenticated, user } = this.props.auth;
        if (!isAuthenticated) return <Redirect to='/login' />
    return (
        <Navbar bg="light" expand="sm">
          <Navbar.Toggle aria-controls="basic-navbar-nav"/>
          <Navbar.Collapse id="basic-navbar-nav">

            <Nav className="ml-auto">
              <Link to="/chat">Chat</Link>
              <Link to="/login" onClick = {this.onLogout}>Logout</Link>
             </Nav> 
            ) :(
             <Nav className="ml-auto">
                <Link to="/registration">Registration</Link>
                <Link to="/login">Login</Link>
             </Nav>

            </Navbar.Collapse>
        </Navbar>
    )}
}

const mapStateToProps = state => ({
    auth: state.auth
  });

export default connect(
    mapStateToProps,
   {logoutUser}
  )(NavAuth);

从'react router dom'导入{Redirect}；
类NavAuth扩展组件{
状态={}
onLogout=e=>{
e、 预防默认值（）；
window.localStorage.clear（）；
this.props.logoutUser（）；
//this.props.history.push（'/login'）；
}
渲染（）{
const{isAuthenticated，user}=this.props.auth；
如果（！isAuthenticated）返回
返回(
聊天
注销
) :(
登记处
登录
)}
}
常量mapStateToProps=状态=>({
auth:state.auth
});
导出默认连接(
MapStateTops，
{logoutUser}
)（NavAuth）；

您正在使用react-bootstrap吗？是的，我正在使用react-bootstrap。您可以在您的

return（）

语句之前使用

if（！isAuthenticated）return

并从

导入{Redirect}从'react-router dom'导入
重定向
from谢谢。我试过了，但它会让导航栏在启动应用程序时完全消失。当我登录然后注销时，它仍然不会重定向到登录页面。我尝试过，但它会使导航栏在启动应用程序时完全消失。当我登录然后注销时，它仍然不会重定向到登录页面。请检查您的isAuthenticated值。如果它没有重定向，则表示您没有从本地存储中删除用户信息，也没有使用任何方式来持久化用户状态。“isAuthenticated”授权缩减器中的状态被设置为true，而它本不应该被设置为true。我纠正后，指向=“/login”>的链接正常工作。