Open5
React Routerでactionのあとにモーダルを閉じたい
adwdユーザーリスト画面にユーザー作成ボタンがあり、押すとユーザー作成モーダルが開く。
モーダル内に入力して保存ボタンを押すとユーザーが作成されモーダルが閉じる。
ユーザー個別に編集画面があり、編集したり削除したりできる。
こういうUIをReact Routerでどう実装するのがいいか？
React RouterのactionはReactコンポーネントではないためフックやContextが使えない。
このポストのまとめ的なスクラップ
adwdまずURLにモーダルの状態を乗せるかどうかという仕様をどちらにするかで実装方針はほぼ決まる。
どっちでもいいので実装が楽で少なく済む方法でいうとどちらもあまり差がなさそう。
割と頻出パターンな気がするので公式にこうしろと言ってもらってそれに乗りたいかもしれない
adwdモーダルの状態をURLに乗せるか
/users?modal=open や /users/create /users/1/edit のようなURLに対してモーダルを割り当てる。
これまであまり見ないスタイルだと思うが最近実際のサービスで見るのとNext.jsのParallel Routesはそれが前提になっている
- Pros
- URLにモーダルの状態が乗るので戻る・進むで行き来できる
-
/users/1/editみたいなURLを共有できる
- Cons
- 戻る・進むでモーダルが開閉するのは不自然に感じるかもしれない
adwdOutletを使ってRouteをネストさせてURLにモーダルの状態を乗せる
/users/create /users/1/edit /users/1/delete に対してモーダルを表示するコンポーネントを割り当てる。
/users のコンポーネントに <Outlet /> を使い、ユーザーリスト上にモーダルが表示されるようにする。
actionでは redirect('/users/) や replace('/users') を使う
- Pros
- react-routerの機能で完結して実装できる
- モーダルの状態をRouteに割り当てているのでルーティングの制御をすればモーダルの状態を制御できる
- Cons
- モーダルの種類だけRouteが増えるのでやや煩雑？
-
replaceを使うと履歴に/usersが2つ連続する
adwdモーダルの開閉を状態管理で行う
useState や状態管理ライブラリでモーダルの開閉を管理する
- Pros
- URLにモーダルの状態が乗らない
- Cons
- Reactコンポーネントではないactionで状態を触りにくい
- jotaiだとstoreを使ってReactコンポーネント外で状態を変化できる。その場合Providerが必要だったりしてやや煩雑
- Reactコンポーネントではないactionで状態を触りにくい