RoutesとRoute
対応表を増やす
前のレッスンで書いた Routes は、URL と部品の対応表です。ページを増やすというのは、この表に行を足すことに他なりません。
TypeScript (JSX)
<Routes>
<Route path="/" element={<Home />} />
<Route path="/items" element={<ItemList />} />
</Routes>これで / ではトップが、/items では商品一覧が出ます。fleama の画面は5つありますが、増やし方は最後まで同じです。
Routes は1つだけ選ぶ
Routes は、中に並んだ Route のうちいまの URL に一番よく合うものを1つだけ選んで出します。上から順に全部出すわけではありません。だから /items を開いたときにトップが一緒に出ることはありません。
逆に、Routes の外に書いたものはどの URL でも出ます。全ページ共通のナビゲーションやフッターは Routes の外に置きます。
TypeScript (JSX)
<BrowserRouter>
<nav className="nav">...</nav>
<Routes>
<Route path="/" element={<Home />} />
</Routes>
</BrowserRouter>どこに置くかで、共通部分か切り替わる部分かが決まるわけです。ここを取り違えると、ページを移るたびにナビが消えるアプリになります。
element には JSX を渡す
element に渡すのは <ItemList /> という書かれた JSX です。ItemList と関数のまま渡すと何も出ません。React Router の以前の版では component に関数を渡す書き方でしたが、v7 は element に統一されています。
なお今回のナビゲーションには Link を使っています。移動の書き方そのものは次のレッスンで扱うので、今回は書いてあるものをそのまま使ってください。
演習
商品一覧のページを対応表に足し、商品を並べます。