React Routerのデータモードで、ルートのhandleに項目名を書き、useMatchesで集めてパンくずリストを作りました。loaderのデータを項目名に使う方法、indexルートとの関係、移動中とエラーのときの表示、区切り ...

React Routerのデータモードでは、ローダーを待つあいだ前の画面が残ります。useNavigationで画面上部に読み込みバーを出す方法、NavLinkのpendingクラスとisPendingで、押したリンクの文字を灰色にし ...

React Routerのデータモードでは、ScrollRestorationを1つ置くだけで、戻るボタンで一覧に戻ったときに元のスクロール位置が復元され、新しいページは上から表示されます。ローダーとの関係、getKeyとpreven ...

入力したまま保存していない内容を、うっかり捨てないための確認の出し方です。再読み込みやタブを閉じる操作はbeforeunloadで、アプリの中の画面移動はReact RouterのuseBlockerで止める方法を、検証環境で確かめま ...

React Routerのデータモードでは、ルートにactionを書くと、Formで送信した入力をrequest.formData()で受け取れます。入力の誤りを400で返して表示する方法と、保存後のリダイレクトと一覧の読み直しを、検 ...

一覧の絞り込みの条件をURLのクエリに置くと、再読み込みやURLの共有、ブラウザの「戻る」で条件が元に戻ります。React RouterのuseSearchParamsでの読み書き、検索欄の履歴の残し方、入力欄のカーソルが飛ぶ問題と、 ...

React Routerのデータモードでは、ルートにloaderを書くと、画面を描画する前にデータを読み込めます。useLoaderDataでの受け取り方と型の付け方、入れ子のルートの読み込みの順番、読み込み中の表示、エラーと中止の扱 ...