URLパラメータ
商品の数だけ Route は書けない
商品詳細のページは、商品の数だけ URL があります。
プレーンテキスト
/items/1
/items/2
/items/3出品されるたびに Route を1行足す、というわけにはいきません。変わるところを変数にした1本の Routeで受けます。
TypeScript (JSX)
<Route path="/items/:id" element={<ItemDetail />} />:id の : から始まる部分が変数です。これを URL パラメータと呼びます。この1行で /items/1 も /items/999 も受けられます。名前は :id でなくても構いませんが、受け取るときに同じ名前を使います。
useParams で受け取る
受け取る側では useParams を呼びます。
TypeScript (JSX)
import { useParams } from "react-router";
function ItemDetail() {
const { id } = useParams();
const item = items.find((i) => i.id === id);
}返ってくるのは { id: "2" } のようなオブジェクトです。分割代入で id を取り出せます。
ここで気を付けることが1つあります。URL から来る値は必ず文字列です。/items/2 の 2 は数値の 2 ではなく文字の "2" です。Item の id を number で持っていると find が永遠に見つけられません。fleama の id を最初から string にしてあるのはこのためです。
見つからなかったときを書く
URL は誰でも打ち込めます。/items/999 のように、無い商品を指されることは普通に起きます。
TypeScript (JSX)
if (!item) {
return <p className="detail-missing">その商品は見つかりませんでした</p>;
}find は見つからないと undefined を返すので、TypeScript も「無いかもしれない」と教えてくれます。ここを書かずに item.title と書くと、その場で怒られます。型が、書き忘れを先に見つけてくれる場面です。
演習
商品詳細のページを1本の Route で作ります。