RoutesとRoute｜基礎を学ぶ - ゆめさくコード

対応表を増やす

前のレッスンで書いた Routes は、URL と部品の対応表です。ページを増やすというのは、この表に行を足すことに他なりません。

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/items" element={<ItemList />} />
</Routes>

これで / ではトップが、/items では商品一覧が出ます。fleama の画面は5つありますが、増やし方は最後まで同じです。

Routes は、中に並んだ Route のうちいまの URL に一番よく合うものを1つだけ選んで出します。上から順に全部出すわけではありません。だから /items を開いたときにトップが一緒に出ることはありません。

逆に、Routes の外に書いたものはどの URL でも出ます。全ページ共通のナビゲーションやフッターは Routes の外に置きます。

<BrowserRouter>
  <nav className="nav">...</nav>
  <Routes>
    <Route path="/" element={<Home />} />
  </Routes>
</BrowserRouter>

どこに置くかで、共通部分か切り替わる部分かが決まるわけです。ここを取り違えると、ページを移るたびにナビが消えるアプリになります。

element に渡すのは <ItemList /> という書かれた JSX です。ItemList と関数のまま渡すと何も出ません。React Router の以前の版では component に関数を渡す書き方でしたが、v7 は element に統一されています。

なお今回のナビゲーションには Link を使っています。移動の書き方そのものは次のレッスンで扱うので、今回は書いてあるものをそのまま使ってください。

商品一覧のページを対応表に足し、商品を並べます。