React.js で次のページにクラスインスタンスを渡す方法

Question

AWS Amplify + React.js でサインインがある Web ページを作っております。
サインイン時にパスワード未変更のユーザーであった場合、パスワード変更ページに飛ばしたいです。
この遷移でクラスインスタンスを受け渡ししたいのですが、方法はないでしょうか？

下記の Amplify の仕様のためにサインイン画面の Auth.signIn の戻り値を、クローンなどせず直接パスワード変更画面に渡す必要があります。
https://github.com/aws-amplify/amplify-js/issues/1715#issuecomment-537392659
localStorage に保存してみましたが、JSON 化されて別オブジェクトになるためか、上記イシューのエラーが発生します。
react-router-dom の history.push で渡してみましたが、クローンできないとエラーがでます。

index.js:1 DOMException: Failed to execute 'pushState' on 'History': Storage object could not be cloned.

下記で機能自体は実装できると思いますが、もっと良い方法があれば教えていただけると助かります。
１． Javascript のグローバル変数を作る
２．　パスワード変更ページに Auth.signIn の戻り値ではなく、メールアドレスとパスワードを送って、
変更ページでもう一度 Auth.signIn をする。

Comments

[hoshi-takanori]

「次のページに飛ばす」のは react-router を使って SPA にしてるんですよね。react の状態管理は理解されていますか？ redux や context などでデータを持てば良いだけでは。

[gaegaelab]

親コンポーネントに変数で持たせるだけにしました。お騒がせしました。

Answer 1

react-router-dom とか使わずにページの親のコンポーネントに変数として持たせることにしました。