つくる - ページ分割完了
第7章のまとめとして組む
新しいことは出てきません。ここまでの5つを組み合わせて、fleama を複数ページのアプリにします。
BrowserRouterで包むRoutesとRouteで URL と画面を対応させるLinkとuseNavigateで移るuseParamsで商品詳細を1本の Route にする- アスタリスクの Route で迷子を受ける
5つの画面を1枚の表にする
fleama の画面はこうなります。
TypeScript (JSX)
<Routes>
<Route path="/" element={<Home />} />
<Route path="/items" element={<ItemList items={items} />} />
<Route path="/items/:id" element={<ItemDetail items={items} />} />
<Route path="/new" element={<NewItem />} />
<Route path="/mypage" element={<MyPage items={items} />} />
<Route path="*" element={<NotFound />} />
</Routes>アプリ全体がこの6行で見渡せます。画面の一覧表がコードとして1か所にあるというのが、ルーティングを入れて得られる一番大きなものです。
データはどこで取るか
商品の取得は App で1回だけ行い、必要な画面に props で渡します。各ページがそれぞれ取りに行くと、ページを移るたびに読み込み直しになります。
TypeScript (JSX)
const [items, setItems] = useState<Item[]>([]);
useEffect(() => {
fetch("/api/items")
.then((res) => res.json())
.then((data: Item[]) => setItems(data));
}, []);App は BrowserRouter の外側にいるので、ページが変わっても作り直されません。だから取得は1回で済みます。第8章では、この形をもっと整理していきます。
演習
対応表を書き上げて、fleama の5つの画面を通します。