【13章】ブログサイトを作る　課題2

1、課題1をクリアし次は課題2用のブランチを切った

2、eact-routerをインストールし<App />をBroweserRouterで挟んだ、どうやらこれでURLに応じてページを切り替えるという宣言のようだ。

3、URLごとに表示を切り替えるためHome.jsxを作り見出しと記事一覧を引越し
いまだにpathの../←これが苦手
.で今いる階層
..で上の階層・・・上？

4、詳細ページ用のファイルを作りreact-routerの部品であるRoutersで挟みRouterでURLの表示を決めた

5、記事カードをreact-routerの部品であるLinkで包みクリックで遷移するようにした。
aタグは全体を読み込み直す
Linkは必要な部分だけを入れ替えるのでアプリ内移動ではLinkを使うようだ

6、react-routerの部品であるuseParamsでURLのidを読み取り変数idに代入し<p>{ id }</p>で記事のidを取得できていることを確認

7、findで記事を探す
IDが一致する最初の1件を探したAIの助けも借り
const post = posts.find((post) => post.id === Number(id));
と記述することが重要と教えてくれた、そうfindが探しているのは数字、URLは文字列、このままでは一致せずエラーが出る（実際エラーで何も表示されなかった）===は厳密に比較するので1と”1”は別物と判断される。

8、詳細ページの中身を１つづつ組み立てる

9、HeaderのリンクもLinkへ書き換える

10、詳細ページの見た目をTailwindcssで整える

つまづき

大体が書き間違えや小文字と大文字の違い、余分なスペース
コードはあっているのにファイルが見つからないときはファイル名に余分なスペースやアルファベットの打ち間違い、拡張子、場所を疑う。

最後にif文で記事が未tからなかった時の処理を追加し課題2をなんとか終えることができた。

課題3も頑張るぞ💪