遷移を作る
押して移るか、勝手に移るか
ページを移る場面は2種類あります。利用者が押して移る場面と、処理が終わったのでアプリの都合で移す場面です。fleama なら、ナビの「商品一覧」を押すのが前者、出品ボタンを押して保存が済んだあと一覧へ送るのが後者です。この2つは書き方が違います。
押して移るのは Link
押して移るところには Link を使います。
TypeScript (JSX)
import { Link } from "react-router";
<Link className="to-items" to="/items">商品一覧</Link>行き先は href ではなく to に書きます。画面には a タグとして出るので、右クリックから別のタブで開けますし、キーボードでも辿れます。押したときだけ React Router が横取りして、サーバーに行かずに部品を差し替えます。
移動を div の onClick で書いてしまうと、この良さが全部消えます。押して移るところは必ず Link です。
処理のあとに移るのは useNavigate
出品ボタンのように、押した瞬間ではなく処理が終わってから移る場面では、移動を命令として書きます。
TypeScript (JSX)
import { useNavigate } from "react-router";
function NewItem() {
const navigate = useNavigate();
function handleSubmit(e: FormEvent<HTMLFormElement>) {
e.preventDefault();
navigate("/items");
}
}useNavigate はフックなので、部品の中で呼びます。返ってくる navigate に行き先を渡すと、その場で移ります。
navigate(-1) と数を渡すと、ブラウザの戻るボタンと同じように1つ前に戻ります。
どちらを選ぶか
迷ったら、押した瞬間に移るなら Link、何かしてから移るなら useNavigate で分けてください。押すだけの移動を useNavigate で書くと、右クリックも新しいタブも効かない、押せるだけの飾りになります。
演習
ナビを Link にして、出品したあと一覧へ送ります。