はじめに
reactに初めて触ったときは一目見ると何をしているかわからない記述がたくさんありました。(どの言語でもですが)
一つ一つ調べて自分の言葉でアウトプットすると理解度が深まると思ったので簡単なことでもqiitaに残そうと思います。
useHistoryとは
react-router-domをimportすると使用できるようになります。
簡単にまとめると、指定したリンクに飛ばしたい時に使用します。
単純に文字をクリックしたらリンクを飛ばしたいというだけであれば、
下記のように、"Sign Up now!"をクリックすれば指定した"/signup"に移動できる"Link"タグを使用すればOKです。
<Link to="/signup" className={classes.link}>
Sign Up now!
</Link>
<Link to="/password/reset" className={classes.link}>
パスワードを忘れた場合はこちら
</Link>
ではuseHistoryは、どんな時に使用するのでしょうか?
それは関数の中の処理の一つとしてリンクに移動したい時などです。
useHistoryの使用例
基本、useHistoryはpushメソッドを使って引数に移動したいurlを記述して使用します。
(他に使い方があるのか調べましたが見つかりませんでした)
例として、僕がポートフォリオ用に実装しているコードをそのまま貼り付けます。
(不要な情報が多くてすみません。)
これはhandleSubmitがクリックされたらパスワードを変更のapi通信を行う関数なのですが、
もしapi通信が成功してステータス200を返したら
① "パスワード変更に成功しました。新しいパスワードでログインをしてください。"というalertが表示される
②alertが表示された後に"history.push("/signin")"で指定したサインインのページに推移する
import { useHistory } from "react-router-dom"
~~諸々省略してます~~
//ここでusehistoryをhistoryに代入
const history = useHistory()
const handleSubmit = async (e: React.MouseEvent<HTMLButtonElement>) => {
e.preventDefault()
const data = createFormData()
try {
const res = await RedirectForgetCurrentUserPassword(data)
console.log(res)
if (res.status === 200) {
alert(
"パスワード変更に成功しました。\n新しいパスワードでログインをしてください。"
)
//ここでpushメソッドを使って引数にurlを指定している。
history.push("/signin")
console.log("changed Password successfully!")
} else {
setAlertMessageOpen(true)
}
} catch (err) {
console.log(err)
setAlertMessageOpen(true)
}
}
このようにuseHistoryを使用することで、関数の中の処理の一つとしてリンクに飛ぶことができるようになります!
終わりに
Reactの"use~"という名前の機能が多く、頭が混乱することもありますが、個別に調べると理解しやすいですね。
(useHistoryが簡単なだけかもしれませんが)
この調子でReactの機能を少しづつアウトプットしていきます。