反応ルーターダムを使用して安全なルートを作成する

Question

使い方 react-router-dom保護されたルートを作成し、応答を localStorage に保存して、ユーザーが次回開いたときにその詳細を再度表示できるようにします。ログイン後、ダッシュボード ページにリダイレクトされます。

すべての関数は ContextApi に追加されます。

コードサンドボックスのリンク: コード

試してみましたが、達成できませんでした。

ルーティングページ

リーリー

コンテキストページ

ああああ

Answer 1

v6 の場合:

リーリー

ドキュメントへのリンク: https://gist.github.com/mjackson/d54b40a094277b7afdd6b81f51a0393f

Answer 2

＃＃＃質問＃＃＃ リーリー

Switch

は、Route コンポーネントと Redirect コンポーネントを除き、レンダリングを処理しません。このように「ネスト」したい場合は、各コンポーネントを共通のルートでラップする必要がありますが、これはまったく必要ありません。 ログイン コンポーネントは、最初にアクセスした「ホームページ」またはプライベート ルートへのリダイレクトも処理しません。

＃＃＃解決＃＃＃

反応ルーターダム

v6

バージョン 6 では、カスタム ルーティング コンポーネントは一般的ではなくなり、認証レイアウト コンポーネントを使用する方法が推奨されます。 リーリー ...

リーリー ＃＃＃または＃＃＃ リーリー

...

リーリー

反応ルーターダム

v5

認証コンテキストを使用する

PrivateRoute

コンポーネントを作成します。 リーリー 元のアクセス ルートへのリダイレクトを処理するために、

Login

コンポーネントを更新します。 リーリー すべてのルートを「フラット リスト」でレンダリングします

リーリー