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

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

実現したいこと

以下のことをできるようにすることで、画面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に不安がある方向けに、こちらもまとめました。ご参考になりましたら幸いです。