Techpit:テックピット
  前のパートに戻る 完了して次のパートへ  

  2-2 react-router-domをインストールする

react-router-domをインストールする(5分)


SPAでは全てのアクセスはindex.htmlにリダイレクトされます。 その為、サーバーサイドではなくクライアントサイド(Webアプリ側)でルーティングできます。


インストールする


ルーティングの為のライブラリreact-router-domをインストールします。

$ npm i -S react-router-dom


AppRouterを定義する


次に、ルーティングする為のコンポーネントAppRouterを定義します。

前に作成したPageHomePageNotFoundPageThreadを呼び出します。

Switchコンポーネントはpathの一致する<Route />を1つだけレンダリングするようにします。

Routeコンポーネントのexactexact={true}を意味しています。 デフォルトのexact={false}の場合は部分一致でもレンダリングされますが、 1つのページに1つのコンポーネントをレンダリングしたいのでexact={true}とします。


Appを修正する


このAppRouterコンポーネントをファイル./src/App.jsから呼び出します。

http://localhost:3000/ではPageHomeがレンダリングされることを確認します。

同様にhttp://localhost:3000/threads/fooではPageThreadがレンダリングされるので確認してください。 また、それ以外のパスにアクセスするとPageNotFoundがレンダリングされます。

以上で今回のパートは終了です。

教材を進めていく中で何か困ったことがあったら作成者に質問してみよう!


エラーが出てしまって「手を尽くしたけど解決できない!」「ここの説明がよく理解できない!」など質問したいことは教材を作成した方に直接聞いてみよう!

作成者:uufish
twitter:@eslintrc
Email:eslintrc@gmail.com