【エクササイズ】React Routerを使ったクイズアプリを作る

課題
  • Reactの知識の再確認
  • React Routerを使って複数ページのルーティングを設定する
  • jestを使ってテストの作成する
  • GitHubに用意した課題の内容を確認して、課題クリアがこの記事でのゴール

課題内容は以下の課題レポジトリに記述しています。

課題レポジトリ

GitHub : js_exercise_for_react_router_1

今回作成する課題の完成形のイメージは以下のとおりです。

今回の課題の完成形今回の課題の完成形

課題解決するために参考になる資料

【JavaScript】React Routerとは

あわせて読みたい
【JavaScript】React Routerとは今回は「React Router」の概要を解説します。React RouterとはReactで作ったWebページのルーティングを設定できるライブラリとなります。ここでいう「ルーティング」とは「URL」と「表示するコンポーネント」の紐付けになります。...

複数ページを持つReactアプリを作成するときには「React Router」を使うと便利であることを上記で解説しました。

React Routerの概要を掴みたい方は上の記事を参考にしていただけたらと思います^^

React Routerでルーティングの設定と表示切り替えを行う

あわせて読みたい
React Routerでルーティングの設定と表示切り替えを行うReact Routerでルーティングを設定する際の基本的な方法を解説しました。また、ページ移動用のリンクを作成するときにはHTMLのa要素を使うのではなく、React Routerが提供しているLinkを使った方が良い理由についても説明しました。...

上の記事で「React Router」を使ったルーティングの設定方法を解説しました。

【React Router】HashRouterを使ってルーティングを設定する

あわせて読みたい
【React Router】HashRouterを使ってルーティングを設定するReact Routerを使って表示の切り替えを行う際に、前回記事では、「BrowserRouter」「Route」を使いました。今回は「BrowserRouter」の代わりに「HashRouter」を使います。「HashRouter」を使うことでGitHub Pagesを使って無料でReactアプリを公開できます。...

上の記事ではルーティング設定を行う際に「BrowserRouter」「HashRouter」の挙動の違いを解説しました。

GitHub PagesにReact Routerを使ったアプリを公開したい場合は、「HashRouter」を使うと良いです。

【React Router】history, location, matchを理解する

あわせて読みたい
【React Router】history, location, matchを理解するReact Routerでは、RouteにセットしたComponentには「history」「location」「match」というpropsがセットされます。特にAPIを使ったサービスを作る際には「match」オブジェクトが重宝されます。...

ルーティング設定に紐付けたコンポーネントは「history」「location」「match」の3つのオブジェクトがprops経由で渡されます。

これらのオブジェクトを使うと、「ページの移動」「ページ履歴の操作」「URLの動的パラメータの取得」など、プログラムからいろんな操作を行えるようになります。

質問・答え合わせ受け付けてます

課題に関して質問や答えの確認をしたい方はお気軽にご連絡をいただけたらと思います。

お問い合わせ・TwitterのDM・LINE@で受けつけています。TwitterのDM、LINE@のほうが早く気づけるので早めに返信できるかと思います。

あわせて読みたい
【絶賛受付中】プログラミング・Webの相談お気軽にどうぞ!
【絶賛受付中】プログラミング・Webの相談お気軽にどうぞ!プログラミングやWebで困っていることに対して何でも質問受け付けています。「こんなこと質問しても大丈夫かな」と思っている方のために過去にどんな質問があったのか一例で挙げているので参考にしていただけたらと思います。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る