読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

文系新卒プログラマーのメモ

Relayアプリケーションに、routerを導入する

Relay React.js react-router

RelayでSPAを作っています。前回までで、ひとまず形には為りました。

 

chuckwebtips.hatenablog.com

 

ただ、現在の状態だと1つのページしかありません。

 

f:id:chuck0523:20160704040429p:plain

(求人一覧が表示されている状態)

 

求人をクリックしたら、求人の詳細画面にうつる。みたいな処理をReact-routerを利用して追加します。

 

できるかなあ。。。

 

 

参考にしたプロジェクト

react-routerおよび、react-router-relayの使い方については以下のプロジェクトを参考にしました。

github.com

 

パッケージインストール

必要なパッケージをインストールします。

$ npm install --save react-router react-router-relay relay-local-schema history@2.1.2

Relayアプリケーションでルーターを使うには、react-routerだけではなくreact-router-relayも必要みたいです。

さらに、historyというパッケージもインストールします。これは、ブラウザの履歴等をカンタンに扱うことができるパッケージのようです。

 

github.com

 

便利ですね。

ちなみに、コンソールからwindow.historyと入力すると、実際にhistoryを見ることができます。

 

f:id:chuck0523:20160704041155p:plain

 

バージョンを指定するのは、他のパッケージとの依存性のためです。

 

データ追加

新ページのためのデータを追加します。

まずは、擬似的なデータベース定義を行っているdatabase.jsに対して追加をします。

 

gist.github.com

(修正箇所のみ抜粋)

detail というカラム名で求人の詳細情報を追加しました。

 

次に、スキーマも修正します。

gist.github.com

 

React側から取得できるように、スキーマにdetailというフィールドを追加しました。

 

データベースとスキーマを変更したので、更新コマンドを打ちます。

 

$ npm run update-schema

 

 

新ページ作成

新しいページを作成します。

gist.github.com

 

まだ作りかけですが、↑のような感じになるかなと思います。

ルーティングで選択されたJobのIDを渡してやって、それをもとに表示すれば良さそうです。

 

ホントは、Array.prototype.filterを使わずに、GraphQLでクエリを発行する際に単一のJobを取得すれば良いのですが、まだGraphQLに慣れておらず…。あとでやります。

 

ルーティングの作成

来ました。今回のメイン。楽しいポイントですね。

 

(と思いきや、ここで3時間ハマりました。)

 

まず、./src/routes.js を新規作成しました。

gist.github.com

 

ここで振り分けを行っています。

新しく生成したルーティングファイルをアプリケーションのルートで読み込みます。

 

ルートのファイルは以下のようになりました。

gist.github.com

ReactDOM.render内にて、<Router />のroutesの引数として、ルーティングファイルを渡しています。

 

コンポーネントの新規作成

ここで、新しいコンポーネントをいくつか作成しました。

f:id:chuck0523:20160704071829p:plain

 

まず、共通パーツがAppとFooter、およびFooterから呼ばれるAboutとHelpです。

 

以下、個別のページとして設定した個別のコンポーネントについて。

まず、ルートのパスにアクセスするとHomeコンポーネントが呼ばれます。これは、ルーティングでIndexRouteとして設定しました。

 

f:id:chuck0523:20160704072312p:plain

(Home画面)

 

ヘッダのWelcome!と、フッタのリンク集が共通パーツですね。フッタのTopがHome画面へのリンクで、AboutとHelpはそれぞれ、以下のページに遷移します。

 

f:id:chuck0523:20160704072433p:plain

About画面。

 

f:id:chuck0523:20160704072443p:plain

Help画面。

 

これらはそれぞれ、react-routerのLinkというコンポーネントを用いて遷移をしています。

 

そして、メインですが、Home画面の'Look at JobBoard!'というリンクをクリックすると、

 

f:id:chuck0523:20160704080800p:plain

求人一覧画面に遷移します。

やりました!ページ遷移ができました!

 

さらに、see detailを押してみましょう。試しに、ux-designerのsee detailを押すと、、、

 

f:id:chuck0523:20160704081239p:plain

ux-designerの求人個別画面に飛びました!

 

無事、Relayアプリケーションにルーティングを導入することができました。

 

コードはこちらにあります。

github.com