【axios, React】APIとの通信中にLoading画面を表示させる方法

#概要
こんにちは！
今日はAPIとデータのやり取りをしている間Loading画面を表示させておく方法について説明します。
axiosのawait、asyncなどをうまく使う必要があるのでやや難しいかもしれません。手順を追って説明していきます。
ルーティングにはreact-router-domを使用しています。

#手順

1. Loadingコンポーネントを作成
2. ルーティングの設定
3. axiosの記述

#具体的な実装
##1.Loadingコンポーネントを作成
（例）

import React from "react";

const Loading = () => {
  return <h1>Loading</h1>;
};

export default Loading;

このようにしてLoading中に表示して欲しい内容を記述しましょう。
今回は簡単のためh1タグでLoadingと表示させているだけです。

##2.ルーティングの設定
（例）

import Loading from "./Loading";
...（中略）
<Router>
  <Switch>
    ...（中略）
    <Route exact path="/Loading" render={() => <Loading />} />
　　 ...（中略）
  </Switch>
</Router>

Loading画面に遷移させる際のpathをルーティングを設定しているところで指定します。
(react-router-domについては後日また記事を書こうと思います。)

##3.axiosの記述
ここで実際にAPI通信を行います。
Loading画面への遷移後は/Resultに遷移させています。

async function getAnswer() {
      history.push("/Loading");
      await axios
        .post("http://localhost:3000/questions/verify_answer", {
          answer: inputs,
        })
        .then(function (response) {
          console.log(response);
          console.log(Boolean(response["data"]));
          Prop.handleJudgeChange(Boolean(response["data"]));
        })
        .catch(function (error) {
          console.log("エラーだよ");
          console.log(error);
        });
      history.push("/Result");
    }

asyncを指定した関数の中でawaitを記述するとasyncの関数の中の処理はawaitを行った後に行われます。
つまり最初に/Loadingに遷移した後、axiosでPOSTの処理を行って、それが終了し次第history.push("/Result");が実行されるためLoading後にResultが出力されます。