🙆

Next.js(React)でFormの入力途中とかでページを挟みたい時のススメ

2022/12/13に公開約1,200字

思いつく限りでは、2つあります。

  1. ページ遷移ではなく、フルスクリーンダイアログを出現させます。×ボタンと戻るボタンのみでフォームに戻る(ダイアログを消す)ことができます。
  2. ページ遷移先に状態変数の値を渡します。戻ってくる時も状態変数の値を渡して元のページに戻ってくきます。

Pros Cons(メリットデメリット)

Pros Cons
案1 実装が楽。MUIにコードサンプルがあり、ほとんどコピペですぐに使える URLがない
案2 URLがある 実装が面倒くさい

ページが、その画面の中でしか参照されないのでしたら、案1を推奨します。
フォーム以外のさまざまな場所からページが参照される場合でしたら、案2を推奨します。

ブラウザバックの時に、値の保持どうするのか

Reactでは、ブラウザバックの時にページの再レンダリングが行われ、useStateがもう一度実行されるため、状態変数が初期化されてしまいます。
つまり、保持していたはずのデータが消えます。値の保持をしたいので、解決策を下記します。

1. ブラウザバックさせない方針。beforeunloadを使ってブラウザバックしようとすると警告を出して、ユーザーの手を止めたいです。
2. ブラウザバックしても値を保持する方針。localStorageにデータを保持しておいて、ブラウザバック後、再レンダリング後にlocalStorageの値を読みます。

実装方針としては、1を主軸に行います。
どうしても2で行きたいのであれば、データの取り扱いに十分注意して実装を行なってください。

FYI

MUI FullDialog
https://mui.com/material-ui/react-dialog/#full-screen-dialogs

LocalStorageには、大事な情報を入れてはいけない
https://techracho.bpsinc.jp/hachi8833/2019_10_09/80851

beforeunload
https://zenn.dev/qaynam/articles/c4794537a163d2

LocalStorage
https://qiita.com/Ryusou/items/8bce84e7b036114b8d72

Discussion

ログインするとコメントできます