🙆
Next.js（React）でFormの入力途中とかでページを挟みたい時のススメ
案
思いつく限りでは、2つあります。
- ページ遷移ではなく、フルスクリーンダイアログを出現させます。×ボタンと戻るボタンのみでフォームに戻る（ダイアログを消す）ことができます。
- ページ遷移先に状態変数の値を渡します。戻ってくる時も状態変数の値を渡して元のページに戻ってくきます。
Pros Cons(メリットデメリット)
| Pros | Cons | |
|---|---|---|
| 案1 | 実装が楽。MUIにコードサンプルがあり、ほとんどコピペですぐに使える | URLがない |
| 案2 | URLがある | 実装が面倒くさい |
ページが、その画面の中でしか参照されないのでしたら、案1を推奨します。
フォーム以外のさまざまな場所からページが参照される場合でしたら、案2を推奨します。
ブラウザバックの時に、値の保持どうするのか
Reactでは、ブラウザバックの時にページの再レンダリングが行われ、useStateがもう一度実行されるため、状態変数が初期化されてしまいます。
つまり、保持していたはずのデータが消えます。値の保持をしたいので、解決策を下記します。
1. ブラウザバックさせない方針。beforeunloadを使ってブラウザバックしようとすると警告を出して、ユーザーの手を止めたいです。
2. ブラウザバックしても値を保持する方針。localStorageにデータを保持しておいて、ブラウザバック後、再レンダリング後にlocalStorageの値を読みます。
実装方針としては、1を主軸に行います。
どうしても2で行きたいのであれば、データの取り扱いに十分注意して実装を行なってください。
FYI
MUI FullDialog
LocalStorageには、大事な情報を入れてはいけない
beforeunload
LocalStorage
Discussion