RouterでReactアプリをルーティングする!ルートの階層構造とページ遷移。RouterでReactアプリをルーティングする!ルートの階層構造とページ遷移。RouterでReactアプリをルーティングする!ルートの階層構造とページ遷移。SPAこの記事では、Reactアプリの定番のReactルーティングのためのライブラリである「ReactRouter」を使った方法を紹介する。ルーティングは本格的にReactアプリを作成するなら必ず必要となる。動的に特定のパスを開くルーティングとは?最初に「ルーティング」について確認しておきたい。通常、ウェブサイトのURLは「ホームアドレス」と「パス」から構成される。今、あなたが開いているこのページを例にすると次のようになる。react-routingルーティングとはパスにコンポーネントを割り当てる作業だと考えると分かりやすいだろう。実際にアプリで使用されるルーティングはより複雑で階層構造を持つことが多い。Microsoft・NETFLIX・Twitterといった大企業で導入されていることからも信頼のおけるライブラリであることが分かるだろう。現在の最新バージョンはv6となっている。Routerの姉妹ツールである。Routerの使い方ここでは簡単なオンラインショッピングサイトを作り、ルーティングの基本的な使い方を勉強しよう。Router公式サイトのチュートリアルをこの記事用にアレンジしたものです。Routerをインストールするために以下のコマンドを実行しよう。react-router-dom@6シンプルなページ遷移を試すまずはシンプルなルーティングから始めてみよう。メインページにあたるApp.jsに2つのリンクを定義する。<Link>タブ内のto属性でページのパスを指定する。<Outlet>タグでページ内容を描画する位置を指定する。);}リンク先となる2つのページを作成する。);}Routeの構造を定義するメインページとリンク先の2つのページが出来たらindex.js(もしくはmain.jsx)にてRouteの設定をおこなう。rootElement);render関数に<BrowserRouter>、<Routes>、<Route>の順でタグを設定する。それぞれの<Route>タグのpathにはパスの名称を、elementにはコンポーネントの変数を鍵カッコで囲み指定する。「/」はアプリのルートをあらわす。アプリを実行すると以下のような画面が表示されるはずだ。それぞれのリンクをクリックするとURL内のパスが切り替わるはずなので確認してみてほしい。ブラウザのURL欄にパスを記述することでコンポーネントを呼び出すこともできるし、ブラウザの戻る・進むボタンをクリックすることでも画面を遷移することができる。無効なパスのためのルートを指定する無効なパスを呼び出そうとした時のためのメッセージもindex.jsにて指定しておこう。rootElement);本のリストを表示する次は商品一覧に表示するための本のデータを用意する。このファイルにはすべての本を取得するための「getBooks」と特定の本を取得するための「getBook(id)」を定義している。id);}取得した本の一覧をBookListコンポーネントで出力する。);}本が一覧で表示されたはず。この段階では本のタイトルをクリックすると空白のページが表示される。パスでパラメーターを渡す次に本の詳細を表示するためのコンポーネントを作成しよう。パスにはパラメーターを指定することもできる。本のIDをパラメーターとして使ってどの本の詳細を表示するか指定しよう。本の詳細を表示するための「BookDetail」ページを作成する。);}index.jsのbook-listルートを次のようにアップデートする。pathに入力されたセミコロン「:」はそのパスがパラメーターであることをあらわす。/></Route>クリックした本の詳細が右側に表示されればアップデートは完了だ。動的に特定のパスを開く最後に動的に特定のパスを開く方法を説明したい。この場合<Outlet>タグを使用せずにダイレクトにパスを呼び出すことができる。方法は以下のようにnavigate関数を呼びだすだけだ。navigate("/book-list");執筆者:久野嘉樹ドイツ・ベルリン在住のフロントエンド・エンジニア。ドイツにてプログラマのための職業訓練プログラム(インターン2社を含む)を終了したのち、医療関係のソフトウェア会社にてフルスタック・エンジニアとして、様々な開発現場に参加する。現在はドイツの大手SIerにてシニアデベロッパーとして有名企業を顧客とする大規模開発に従事する。Java・TypeScriptをメインに業務管理ソフト・ウェブアプリケーションやAndroidアプリなどの開発経験を持つ。現在はSPA(シングルページアプリケーション)のスペシャリストとしてAngularをメインにフロントエンドの開発に携わる。2009年よりドイツに在住。ドイツ語能力はC1レベル。関連する記事Reactを使用するための準備!create-react-appでプロジェクトを作成する。2021.12.23今回はJavaScriptの人気フレームワーク「React」を使用するための手順について説明する。2021.12.26この記事では、今もっとも人気のあるJavaScriptフレームワークであるReactを紹介したい。近年のWebサイトの進化は著しく、過去にはデスクト[...]ReactのJSX記法を勉強する!コンポーネントの種類とその使い方。2022.01.02この記事では、Reactコンポーネントを作成するうえで欠かすことの出来ないJSX記法について説明したい。【2023年】TypeScriptのおすすめ書籍5冊!レベル別に入門書からプロ向けまで紹介。2023.05.14【2023年】JavaScriptのおすすめ本7選!入門者・初心者向けにセレクト。2023.03.04HTMLテーブルで表をデザインする!セルの結合・枠線を付ける・レスポンシブ対応など。2023.01.21CSSグリッドレイアウトを極める!基本的な使い方とプロパティの一覧。2023.01.07【2023年】人気のヘッドレスCMSを徹底比較!Contentful・Strapi・Hygraphなど。JSフレームワーク徹底比較!JavaScript実践VSCodeでReactの開発を行う!React開発者のためのオススメ拡張機能。同一オリジンポリシーを理解する。APIコラム海外エンジニアエンジニア論PC。