时间戳

首页 > 解决方案 > Reactjs 从函数内部重定向

reactjs - Reactjs 从函数内部重定向

问题描述

我有一个带有注销按钮的标题/导航栏功能组件。当用户成功注销时，我希望他们被重定向到登录路由。

使用react-router-dom我已经尝试导入和使用, Redirect，History但它们似乎都没有重定向。withRouterprops.history.push

我见过的所有答案和教程都使用类组件。

import React, { useState, useEffect } from "react";
import { Link, NavLink, useHistory, withRouter } from "react-router-dom";
import { Auth } from "aws-amplify";


function NavBar(props) {

  const [isAuthenticating, setIsAuthenticating] = useState(true);
  const [isAuthenticated, userHasAuthenticated] = useState(false);

  useEffect(() => {
    onLoad();
  }, []);

  async function onLoad() {
    try {
      await Auth.currentSession();
      userHasAuthenticated(true);
    } catch (e) {
      if (e !== "No current user") {
        alert(e);
      }
    }
    setIsAuthenticating(false);
  }

  async function signOut() {
    console.log("Signing out.");
    await Auth.signOut();
    userHasAuthenticated(false);
    props.history.push("/login"); //  Cannot get redirect to work
    console.log("Signed out.");
  }

return (
...
<Nav className='d-md-down-none' navbar>
...
<UncontrolledDropdown>
 <DropdownMenu right>
...
  <DropdownItem onClick={signOut}>
              <i className='fa fa-lock'></i> Logout
  </DropdownItem>
 </DropdownMenu>
</UncontrolledDropdown>
</Nav>
);
}
export default NavBar;

单击注销按钮后，Cognito 身份验证会话数据全部被正确擦除，浏览器控制台中同时显示“退出”和“退出”，但不会重定向用户，控制台中也没有错误或警告。

NavBar 是更高级别 Layout 组件的子组件。

标签： reactjs

解决方案

请创建一个文件“useRouter.js”

import {useContext} from 'react'
import {__RouterContext} from 'react-router'

export default () => useContext(__RouterContext);

并插入以下内容

import useRouter from 'path to useRouter.js'

...

function SignUpForm(props: any) {
...
const router = useRouter()

...
router.history.push('/signin'); // write this where you want to push
}

推荐阅读