AmprifyでAuth.signOutをしているのにページ遷移しないので一時対応する

はじめに

以下の書籍をやっていてつまづいた箇所があったのでまとめます

問題

Auth.signOutを実行するとログイン画面に遷移すると書いてありました

App.jsx

        <h2>
          <a className="App-link" href="." onClick={Auth.signOut}>
            Sign Out
          </a>
        </h2>

しかしクリックをしてもログイン画面に遷移しませんでした。
また、ローカル環境でも遷移しませんでした

解決方法

一度リロードをかけることで遷移するようになりました

App.jsx

import { Amplify, Auth } from "aws-amplify";
import { withAuthenticator } from "@aws-amplify/ui-react";
import "@aws-amplify/ui-react/styles.css";
import aws_exports from "./aws-exports";

Amplify.configure(aws_exports);

const click = () => {
  Auth.signOut();
  window.location.reload();
};

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Sample React app</h1>
        <h2>
          <a className="App-link" href="." onClick={click}>
            Sign Out
          </a>
        </h2>
      </header>
    </div>
  );
}

export default withAuthenticator(App);

リロードはReactを利用するうえではベストな対応ではないので暫定的に行っています
今回は書籍のハンズオンをやる目的なのでこのまま進めました

おわりに

この問題は起こって悩む人がいそうですが、あまりネットに情報がなくハンズオンにいきなりつまづきました