ReactのようなSPAで作っていると、検索条件を入力するような画面にて検索処理を行った場合、URLはそのままに画面描画のみを更新するというのが恐らく入門的な実装だと思います。
しかしサービスとしてのUXを考えると、URLはユーザに現在の状態を明示的に表してくれます。また、ユーザは検索条件を入力した後の結果を他のユーザに共有したりするわけです。
例）
❌ /items (検索画面そのままの状態を共有できない)
⭕️ /items/?id=1234 (検索画面そのままの状態を共有できる)
各toCサービスでも見てもらったらわかりますが、基本的に検索条件やページング処理の内容ってURLに状態が保存されています。
で、ここでユーザが検索条件を打ち替えたときにURL変えたりNavigateすればいいやん！と思っていたのですが、それだとuseEffectが走らないんですね。
例えばコンボボックスの値が動的等、useEffectで初期化処理したい時ってあるかと思います。
今回汎用的に「URLが変わったらuseEffectし直す」という事を達成するコードを書きましたのでメモ。
const location = useLocation();
useEffect( () => {
〜〜〜〜;
}, [location]);
これだけです。
まずuseLocation()でロケーション状態が取得できます。で、これをuseEffectに登録しておけばロケーション状態が変わるたびに初期化処理が可能なわけです。
なんで、useEffectにパラメータの値を条件に検索する処理を書いておき、検索ボタン等を押した時にnavigate(‘~~~’)でパラメータを更新するようにしておけば、PHP的というかSSRな感じで検索処理を書くことができます。
