RelayでSPAを作っています。前回までで、ひとまず形には為りました。
ただ、現在の状態だと１つのページしかありません。
（求人一覧が表示されている状態）
求人をクリックしたら、求人の詳細画面にうつる。みたいな処理をReact-routerを利用して追加します。
できるかなあ。。。
参考にしたプロジェクト
react-routerおよび、react-router-relayの使い方については以下のプロジェクトを参考にしました。
パッケージインストール
必要なパッケージをインストールします。
$ npm install --save react-router react-router-relay relay-local-schema history@2.1.2
Relayアプリケーションでルーターを使うには、react-routerだけではなくreact-router-relayも必要みたいです。
さらに、historyというパッケージもインストールします。これは、ブラウザの履歴等をカンタンに扱うことができるパッケージのようです。
便利ですね。
ちなみに、コンソールからwindow.historyと入力すると、実際にhistoryを見ることができます。
バージョンを指定するのは、他のパッケージとの依存性のためです。
データ追加
新ページのためのデータを追加します。
まずは、擬似的なデータベース定義を行っているdatabase.jsに対して追加をします。
（修正箇所のみ抜粋）
detail というカラム名で求人の詳細情報を追加しました。
次に、スキーマも修正します。
React側から取得できるように、スキーマにdetailというフィールドを追加しました。
データベースとスキーマを変更したので、更新コマンドを打ちます。
$ npm run update-schema
新ページ作成
新しいページを作成します。
まだ作りかけですが、↑のような感じになるかなと思います。
ルーティングで選択されたJobのIDを渡してやって、それをもとに表示すれば良さそうです。
ホントは、Array.prototype.filterを使わずに、GraphQLでクエリを発行する際に単一のJobを取得すれば良いのですが、まだGraphQLに慣れておらず…。あとでやります。
ルーティングの作成
来ました。今回のメイン。楽しいポイントですね。
（と思いきや、ここで３時間ハマりました。）
まず、./src/routes.js を新規作成しました。
ここで振り分けを行っています。
新しく生成したルーティングファイルをアプリケーションのルートで読み込みます。
ルートのファイルは以下のようになりました。
ReactDOM.render内にて、<Router />のroutesの引数として、ルーティングファイルを渡しています。
コンポーネントの新規作成
ここで、新しいコンポーネントをいくつか作成しました。
まず、共通パーツがAppとFooter、およびFooterから呼ばれるAboutとHelpです。
以下、個別のページとして設定した個別のコンポーネントについて。
まず、ルートのパスにアクセスするとHomeコンポーネントが呼ばれます。これは、ルーティングでIndexRouteとして設定しました。
（Home画面）
ヘッダのWelcome!と、フッタのリンク集が共通パーツですね。フッタのTopがHome画面へのリンクで、AboutとHelpはそれぞれ、以下のページに遷移します。
About画面。
Help画面。
これらはそれぞれ、react-routerのLinkというコンポーネントを用いて遷移をしています。
そして、メインですが、Home画面の'Look at JobBoard!'というリンクをクリックすると、
求人一覧画面に遷移します。
やりました！ページ遷移ができました！
さらに、see detailを押してみましょう。試しに、ux-designerのsee detailを押すと、、、
ux-designerの求人個別画面に飛びました！
無事、Relayアプリケーションにルーティングを導入することができました。
コードはこちらにあります。
