如何在 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
     </>
   )
}