最初に

この記事は大体4869向けに書かれているので4869以外が読んで面白いのかは知りません。

というかぶっちゃけ面倒くさいので、なぜ昨晩の自分がこんなことに首を突っ込んだのかと頭を抱えている。
（バッハの旋律を夜に聴いたせいです。）

4869の記事を読んで思ったこと

4869の記事というのはこれ。

https://blog.sh4869.net/post/2018/06/25/using-react-router-and-context-api/

この記事は、MainPageからUserPageへとコンキストを使ってパラメーターを渡すようにしたのだけど、はたしてそれは良かったのか、という話だと思う。

で、この方法が良いか悪いかというと悪いと思う。何かメリットは無いかと考えてはみたのだけど、結局思い付かなかった。
一応、記事に書いてあるメリットとしては、

• user/1などの状態でリロードされても、親コンポーネントがデータを取得したあとにConsumerが受け取るデータが更新されるのでリロードが機能する
• 基本的にはどこからアクセスされたかなどを気にする必要はない
• ReactRouterの黒魔術にあまり頼らなくてすむ

とあるのだけど、別にコンテキストを使わなくてもUserPageにuserプロパティを追加して、MainPageがuserを渡す形にすればいいと思う。
もしプロパティで渡すのでは上手くいかない事情があるのだとすれば、それは相当に複雑な問題だと思うのでreact-reduxとか使った方がいい。

そんな感じ。

とはいえ、MainPageが渡す形だと困るパターンもある。
例えば、現状ではMainPageが全userをとりあえず取ってくることになっているけど、それだとさすがに無駄があるので個別のuserを読み込みたい、と考えることがあるかもしれない。
その場合、このやり方だとMainPageに個別のuserを読み込むためのロジックが増えてしまってよくない。
そうならないためには、userを管理する部分をコンテキストとして持って、各ページでそれを参照するようにすればいい。

という気持ちを一応実装してみた。

https://github.com/MakeNowJust-Labo/react-router-with-context

こんな感じのAPIを持ったサーバーがあって、

• /usersでユーザーの一覧を返す。
• /user/:idで個々のユーザーを返す。

そのAPIを使うクライアントのSPAにはこんなページがある。
(APIサーバーとSPAを配信するサーバーは別）

• /: トップページ。ユーザーの一覧を表示する。
• /user/:id: 個々のユーザーのページ。

当然、各ページを開く際にはAPIの呼び出しが非同期に行われる。サーバーのレスポンスを意図的に遅くしてるのでLoading...とか表示されるから、読み込みが入ればすぐに分かると思う。

/から/user/:idなページに遷移する場合には/を開いたタイミングでそのユーザーの情報も取得できているので読み込みは行なわれない。
しかし/usrt/:idで再読み込みしてから/に移動する場合は、個々のユーザーの情報では一覧を表示できないので、読み込みが発生する、という感じの挙動をする。

リポジトリをcloneしてyarnしてyarn dev:serverとyarn dev:clientすれば動くので確認してみてほしい。

本当はもっと色々書こうと思ったのだけど面倒になってので雑です。以上。