时间戳

首页 > 解决方案 > 使用 React 注销时简要显示的 Sweet Alert

reactjs - 使用 React 注销时简要显示的 Sweet Alert

问题描述

使用 react 处理我的注销功能：

  1. 清除本地存储
  2. 清除令牌
  3. 重定向到主页
  4. 显示警报

我的甜蜜警报有效，它很快就消失了。这是我的注销组件的代码：

import swal from 'sweetalert';
import { setToken } from '../api';

const Logout = () => {
    localStorage.clear();
    setToken('');
    location.href = "/home/";
    <SweetAlert
  title="You are now logged out!"
  onConfirm={this.onConfirm}
  onCancel={this.onCancel}
  btnSize="sm"
/>
}

export default Logout;

标签： reactjssweetalert

解决方案

设置location.href = ...将重新加载浏览器选项卡，因此您在此处渲染的任何组件都将消失。（我猜您将警报 JSX 包装在swal您在此处导入的函数中，如果它出现的话，但我在您的示例中没有看到。看起来它就是这样工作的）。

如果您使用的是反应路由器，那么history.push('/home')使用useHistory之类的东西可能会解决问题。

推荐阅读