2022年2月28日こんにちは、MSKです。Reactの関数コンポーネントを使ってページ遷移を試してみました。スポンサーリンク準備まずはReactアプリを準備します。typescriptを使っていきます。typescriptページ遷移を実装するためのパッケージをインストールします。今回使うのはreact-router-domです。@types/react-router-domコーディングsrcフォルダの中にComponentsというフォルダを作り、その中にRouteManager、Navbar、Home、About、Create、Contactというフォルダを作ります。それぞれのフォルダの中に(フォルダ名).tsxというファイルを作成します。Home、About、Create、Contactにはとりあえず、コンポーネントを作ってそれぞれの名前を表示するようにしておきます。Home;のような感じです。次にNavBarを作ります。NavBarではリンクを作成します。Linkタグのtoというプロパティで飛ぶ先のパスを指定します。Navbar;例えば上のソースではHomeをクリックすると/というパスに飛びます。RouteManagerはNavBarで作成したリンクのパスとコンポーネントを結びつけることをします。RouteManagerのソースは次のようにします。RouteManager;使うのはRouterとRouteです。Routeタグのpathプロパティにリンクさせたいパスを指定して、componentプロパティにそのパスと紐づけるコンポーネントを書きます。最後にRouteManagerを呼び出します。srcの中のindex.tsxを次のようにします。document.getElementById('root'));reportWebVitals();デフォルトではAppタグが書かれていた場所にRouteManagerを入れただけです。ポートフォリオサイト用として作っていたので、最小限の表示からは変わっていますが、こんな感じでページ遷移ができるはずです。最後にReactの関数コンポーネントを使って、ページ遷移を行ってみました。react-router-domを使えば結構簡単にページ遷移を実現できます。以上、「Reactでページ遷移をやってみた!」でした。MEMSK九州在住の組み込み系エンジニアです。2児の父親でもあります。数学やプログラミングが趣味です。最近RustとReact、結び目理論と曲面結び目理論にはまっています。MSKもちのき研究所Reactで問い合わせ画面を作って、メールを送信できるようにした!2週間で合格!統計検定3級をうけてみて!組み込み系エンジニアMSKソフトウェア関連の技術が好きな30代男性です。最近は、Webアプリ開発にチャレンジ中。