保護されたルートの作成:react-router-dom を使用したハウツー ガイド

Question

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

すべての関数は ContextApi に追加されます。Codesandbox 链接：コード

我尝试过，但無法实现

路由页面

import React, { useContext } from "react";
import { globalC } から "./context";
import { Route, Switch, BrowserRouter } from "react-router-dom";
"./About" から About をインポートします。
「./Dashboard」からダッシュボードをインポートします。
「./Login」からログインをインポートします。
"./PageNotFound" から PageNotFound をインポートします。

関数ルート() {
  const { authLogin } = useContext(globalC);
  console.log("authLogin", authLogin);

  戻る （
    <ブラウザルーター>
      ＜スイッチ＞
        {認証ログイン ? (
          <>
            <ルート パス="/ダッシュボード" コンポーネント={ダッシュボード} 正確 />
            <ルートの正確なパス="/概要" コンポーネント={概要} />
          </>
        ):(
          <ルートパス="/" コンポーネント={ログイン} 正確 />
        )}

        <ルートコンポーネント={PageNotFound} />
      </スイッチ>
    </ブラウザルーター>
  );
}
デフォルトのルートをエクスポート;

上下文页面

import React, { Component, createContext } from "react";
「axios」から axios をインポートします。

エクスポート const globalC = createContext();

エクスポート クラス Gprov はコンポーネント {
  状態 = {
    認証ログイン: null、
    認証ログインエラー: null
  };
  コンポーネントDidMount() {
    var localData = JSON.parse(localStorage.getItem("loginDetail"));
    if (ローカルデータ) {
      this.setState({
        authLogin: ローカルデータ
      });
    }
  }

  loginData = async () => {
    ペイロード = { にします
      トークン: "ctz43XoULrgv_0p1pvq7tA",
      データ： {
        名前: "名前名",
        電子メール: "インターネット電子メール",
        電話: "phoneHome"、
        _リピート: 300
      }
    };
    アクシオスを待つ
      .post(`https://app.fakejson.com/q`, ペイロード)
      .then((res) => {
        if (res.status === 200) {
          this.setState({
            認証ログイン: res.data
          });
          localStorage.setItem("loginDetail", JSON.stringify(res.data));
        }
      })
      .catch((err) =>
        this.setState({
          認証ログインエラー: エラー
        })
      );
  };
  与える（） {
    // console.log(localStorage.getItem("loginDetail"));
    戻る （
      <グローバルC.プロバイダー
        値={{
          ...この状態、
          ログインデータ: this.loginData
        }}
      >
        {this.props.children}
      </globalC.Provider>
    );
  }
}

Answer 1

v6 の場合:

リーリー

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

Answer 2

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

Switch

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

＃＃＃解決＃＃＃

反応ルーターダム

v6

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

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

...

リーリー

反応ルーターダム

v5

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

PrivateRoute

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

Login

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

リーリー