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

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

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

試してみましたが、うまくいきませんでした。

路由页面

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}  ); } }