【React+TypeScript開発】画面遷移時にパラメータを渡す方法

こんばんは。今日は、React+TypeScriptのアプリケーションで画面遷移時にパラメータを渡す方法について整理しておこうと思います。

Contents

実現したいこと

以下のことをできるようにすることで、画面Bの内容を動的に変更させたいっ!

  • 画面A上のボタンを押したら画面Bに遷移する。
  • この時、画面Bにパラメータを渡す。

実現方法


React-Router-DomライブラリのuseHistory()関数、及びuseLocation()関数を使って実現できました!

色々探した結果、こちらのStack Overflowの記事にたどり着きました・・・・アリガトウゴザイマス・・・!!

https://stackoverflow.com/questions/44121069/how-to-pass-params-with-history-push-link-redirect-in-react-router-v4

以下のような実装になります。

<画面A>

import { useHistory } from "react-router-dom";

export const ScreenA = () => {
    const handleClick = (params:any) => {
        history.push({
            pathname:'遷移先URL',
            state: params
        });

return(
<div>
       <Button variant="contained" color="primary" href="" onClick={()=>handleClick(data)}>ボタン</Button>
<div>

<画面B>

import { useLocation } from "react-router-dom";

export const ScreenB = () => {
    const location = useLocation();
    const [resultSet, setResultSet] = useState<any>(location.state);

この他にも、以下で紹介されているような方法もあるようです。

https://qiita.com/oda3104/items/de5489cd97ba674cbee5

いずれも、ご参考になれば幸いです。

もしお役に立ちましたら、下のいいねボタンをポチっていただけますと励みになります!

それでは!

[番外編] もっとReact.jsを学ぶには・・・

React.jsをもっと学びたい方、以下におすすめの学習コンテンツをまとめましたので、よろしければご活用いただければと思います!

土台のJavaScript/TypeScriptに不安がある方向けに、こちらもまとめました。ご参考になりましたら幸いです。

土台のJavaScript/TypeScriptに不安がある方向けに、こちらもまとめました。ご参考になりましたら幸いです。

この記事を気に入っていただけたらシェアをお願いします!
ABOUT US
Yuu113
初めまして。ゆうたろうと申します。 兵庫県出身、東京でシステムエンジニアをしております。現在は主にデータ分析、機械学習を活用してビジネスモデリングに取り組んでいます。 日々学んだことや経験したことを整理していきたいと思い、ブログを始めました。旅行、カメラ、IT技術、江戸文化が大好きですので、これらについても記事にしていきたいと思っています。