【React, typescript】react-router-domでLinkタグを使わずにページ遷移させる

概要

こんにちは
今日はreact-router-domでルーティングを実装するときにURLの遷移をLinkタグを用いずに行う方法を紹介します。
自分はボタンを押したときにapiとデータをやり取りする必要があり、その後にページの遷移を行なって欲しかったため、この方法が役立ちました。

具体的な方法

（例）

import { useHistory } from 'react-router-dom'
...（略）
const history = useHistory()
history.push("/Loading");

まずuseHitoryをreact-router-domからimportします。
その後history変数を宣言します。
最後にhistory.push("指定するURL")とすれば完成です。

個人的な感想

これを用いることで好きなタイミングでURL遷移を行うことができるのが嬉しいです。
自分は外部APIと通信し、そのデータを用いて次の画面を表示させたかったのでとても役立ちました。
またそこではaxiosを用いて非同期通信を行いました。いずれその記事も書こうと思います。