ルーティング導入
1つの画面に全部を詰めてきた
ここまでの fleama は、商品一覧もカートも同じ画面の中で切り替えていました。動きはしますが、困ることが3つあります。
- 気に入った商品を人に教えられない。どこを見ていても URL が同じだから
- ブラウザの戻るボタンを押すと、アプリごと閉じてしまう
- 開き直すと必ず最初の画面に戻る
画面と URL が結び付いていないのが原因です。これを結び付けるしくみをルーティングと呼びます。
ページ移動を自分でやる
素の HTML なら、別のページへは次のように移ります。
HTML
<a href="/items">商品一覧</a>これを押すと、ブラウザがサーバーに次のページをもらいに行き、画面が真っ白になってから作り直されます。React で作ったアプリはこれをやりません。持っている state も全部捨てることになるからです。
そのかわり、URL の変化を見て、出す部品を差し替えるという形にします。サーバーには一度も行きません。この作りを SPA と呼びます。Single Page Application の略で、ページは1枚のまま中身だけ入れ替わる、という意味です。
React Router を入れる
自前で書くと大変なので、React Router という定番のライブラリを使います。このコースでは v7 を、宣言的モードと呼ばれる書き方で使います。
一番外側を BrowserRouter で包み、その中に Routes と Route で対応表を書きます。
TypeScript (JSX)
import { BrowserRouter, Routes, Route } from "react-router";
export default function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
</Routes>
</BrowserRouter>
);
}path がその URL、element がそのとき出す部品です。/ を開いたら Home を出す、という1行だけの対応表から始めます。
読み込み元は react-router です。以前は react-router-dom と書いていましたが、v7 からはこちらに寄せられています。
いま居る場所を見る
この教材のプレビューにはアドレス欄がありません。かわりに、画面の上に細い帯が出て、そこにいま居る URL が表示されます。これから先の章では、リンクを押したときにこの帯がどう変わるかを見ながら進めてください。
演習
いまの fleama を BrowserRouter で包み、/ に一覧を割り当てます。