Scroll RestorationとNot-Found Route
戻る操作で移動した際にscrollを復元し、未知のrouteには親しみやすい404を表示して、モバイルで滑らかなUXを保ちます。
「Scroll RestorationとNot-Found Route」はCoddyKit上の無料React Academyレッスンです。 これはレッスン3/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全3レッスンが含まれています。
復元と 404 が必要な理由
目標：自然なナビゲーションを実現します。
- 戻るときにスクロール位置を復元します
- 未知のルートには404ページを表示します
- ライブラリを使わないシンプルなデモです
概念の概要
- 離れる前に、ルートごとの scrollTop を保存します
- マウント時に以前の値を読み取り、scrollTo を実行します
- 一致しないパスを検出し、分かりやすい Not Found 画面を表示します
デモ：小さなルーターシェル
3つのルートを持つ小さなルーター状態を作成します。次にスクロール復元を追加します。
<div id="root"></div>デモ：スクロールの復元
ルートごとに scrollTop を保存し、次のマウント時に復元して、自然な戻る操作を実現します。
<div id="root"></div>デモ：存在しないルート
未知のパス用に NotFound 画面を追加し、Home に移動するボタンを用意します。
<div id="root"></div>ヒントと注意点
- route key ごとにスクロール位置を保存します
- 重い処理を行う前に、マウント時の復元を実行します
- 必ず NotFound 画面を用意し、明確な戻り先を示します
スクロール復元の確認
振り返り
振り返り：ルートごとに scrollTop をキャッシュして復元すると、戻るナビゲーションをネイティブアプリのように感じさせられます。ユーザーを安全に戻れるよう案内する、親しみやすい404画面を追加します。
AI チューターと学ぶ React — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 88
- レッスン
- 324
よくある質問
「Scroll RestorationとNot-Found Route」レッスンは無料ですか？
はい。「Scroll RestorationとNot-Found Route」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全3レッスンが含まれています。
「Scroll RestorationとNot-Found Route」で何を学びますか？
戻る操作で移動した際にscrollを復元し、未知のrouteには親しみやすい404を表示して、モバイルで滑らかなUXを保ちます。 ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
React Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/3です。
「Scroll RestorationとNot-Found Route」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このReact Academyレッスンでコードを書いて実行できますか？
はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Nested Layout、Loader（概念）、Prefetching
- Auth FlowとProtected Route
- Scroll RestorationとNot-Found Route