0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Posted at

#概要
こんにちは
今日は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を用いて非同期通信を行いました。いずれその記事も書こうと思います。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?