ReactのNavigateでパラメータ(引数)を渡して遷移先で参照する

はじめに

Reactを使って新規ユーザー登録作成が成功してログインページに遷移した際にトーストを表示しようとしました
そこでいくつかつまづいたポイントがあったのでまとめます

問題

ユーザー登録を終えるとnavigate(react-router-dom)を利用してログイン画面に遷移する仕組みを作りました
ユーザー登録からログイン画面に遷移したときに登録しましたというトーストをだすため、navigateにパラメータを持たせようとしました

以下の記事を参考にやったのですがエラーになりました

解決方法

記事で使っていたのはuseNavigation()で利用していたのはreact-router-domのuseNavigate()でした
なので以下のようにstateというハッシュの中に設定することで引数を渡すことができました

useSignUp.tsx

            navigation("/sign_in", {
              state: {
                toast: { status: "success", message: "登録しました" },
              },
            });

受け取りはuseEffectでレンダー時に1回だけ実行するようにします
React18ではuseEffectが2回実行されるので(2回トーストがでる)useRefを利用して1回だけ実行するようにしました

Login.tsx

  useEffect(() => {
    if (didLogRef.current === false) {
      const state = location.state as ToastData;
      if (state.toast !== undefined) {
        toaster(state.toast.message, state.toast.status);
      }
      didLogRef.current = true;
    }
  }, []);

おわりに

これがはじめてのuseRefの利用でした
メッセージをだすのに重宝しそうですが記事があまりなかったので役立てばと思います

参考