reactjs - 使用 URL 链接而不是使用反应的按钮注销

问题描述

//这是我的代码 - 我需要从 url 执行注销功能，而不是使用按钮。如何将其作为 url 链接实现。例如，假设我有站点 https://localhost:3000

https://localhost:3000/logout 应该让我退出。

我尝试了各种方法，但似乎不起作用。

import cs from 'clsx';
import s from './Header.module.css';
//import awsmllogo from '../img/logo_awsml_01.svg';

import { STAGE_HOME, STAGE_TRANSCRIBING, STAGE_TRANSCRIBED, STAGE_SUMMARIZE, STAGE_EXPORT, STAGE_SEARCH_EXPORT, STAGE_SEARCH } from '../consts';
import { Link, useHistory } from "react-router-dom";
import { Auth } from "aws-amplify";
import React, { useState, useCallback,useEffect } from "react";
import { Redirect } from "react-router-dom";

export default function Header({
  stage,
  onHome = ()=>{},
  onSearch = ()=>{},
  onAnalyze = ()=>{},
  onHideAnalysis = ()=>{},
  onShowExport = ()=>{},
  onHideExport = ()=>{},
  onReset = ()=>{},
}) {

 
  const history = useHistory();
 
  
  
  async function handleLogout() {
    await Auth.signOut();
    history.push("/");
    window.location.reload(false);
    
  } 
 

  return (
    <>
      <header className={cs(s.base, s.visible)}>
          <div className={s.left}>
          {stage !== STAGE_HOME && stage !== STAGE_SUMMARIZE && stage !== STAGE_EXPORT && stage !==  STAGE_SEARCH_EXPORT && stage !== STAGE_SEARCH? 
            <button onClick={onHome}><span />Home</button>
          : null}
          {stage === STAGE_SUMMARIZE ?
            <button onClick={onHideAnalysis}><span />Back</button>
          : null}
          {stage === STAGE_EXPORT ?
            <button onClick={onHideExport}><span />Back</button>
          : null}

         
        </div>
        <div className={s.headings}>
        <h1>Voice Transcription Analytics Platform</h1> 
        </div>
        <div className={s.right}>
          {stage !== STAGE_SEARCH_EXPORT && stage !== STAGE_SEARCH?
           <button className={s.search} onClick={onSearch}>Search</button>
          : null}
          {stage === STAGE_TRANSCRIBED || stage === STAGE_TRANSCRIBING ?
            <button disabled={stage === STAGE_TRANSCRIBING} onClick={onAnalyze}>Analyze</button>
          : null}
          {stage === STAGE_SUMMARIZE ?
            <button onClick={onShowExport}>Summarize</button>
          : null}
          {stage === STAGE_EXPORT ?
            <button onClick={onReset}>Start over</button>
          : null}
          {stage === STAGE_SEARCH? 
            <button onClick={onHome}><span />Home</button>
          : null}
          {/* {stage !== STAGE_SEARCH_EXPORT? 
          <button onClick={handleLogout}><span />Logout</button>
          : null}
          */}
        
        </div>
      </header>
    </>
    
  )
 
}

标签： reactjsreact-routerreact-router-dom

reactjs - 使用 URL 链接而不是使用反应的按钮注销

问题描述

解决方案

推荐阅读