微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何在 ReactJS 中重定向主页

如何解决如何在 ReactJS 中重定向主页

我有一个登录页面,我用受保护的路由器创建了它。登录成功,我正在存储本地存储。我的问题是在注销。因此,为此,我有一个 Navbar 组件,其中有一个 logout 下拉列表。基本上是这样的:

<Dropdown
                nav
                isOpen={this.state.dropdownopen}
                toggle={(e) => this.dropdownToggle(e)}
              >
                <DropdownToggle caret nav>
                  <i className="Now-ui-icons users_circle-08" />
                </DropdownToggle>
                <DropdownMenu right>
                  <DropdownItem tag="logout" onClick={this.signoutHandler}>logout</DropdownItem>
                </DropdownMenu>
              </Dropdown>

所以我想删除localStorage并重定向到你的主页,在这种情况下是登录

signoutHandler = (e) => {
    localStorage.removeItem('user-info');
    e.history.push("/");
  };

但它给了我一个错误TypeError:无法读取未定义的属性“推送” 请你帮助我好吗? 谢谢!!!

解决方法

重定向可以通过两种方式完成:

import { useHistory } from "react-router-dom";

function Component() {
  let history = useHistory();

  function goHome() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

import { Redirect } from "react-router-dom"

function Component({loggued}){
  if (!logged) {
    return <Redirect to="/" />
  }

  return (
     <>
      hello
     </>
   )
}

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。