<p><code>react-router-dom</code> を使用して保護されたルートを作成し、応答を localStorage に保存して、ユーザーが次回開いたときに詳細を再度表示できるようにする方法。ログイン後、ダッシュボード ページにリダイレクトされる必要があります。 </p> <p>すべての関数は ContextApi に追加されます。Codesandbox 链接：コード</p> <p>我尝试过，但無法实现</p> <p>路由页面</p> <pre class="brush:php;toolbar:false;">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} /> </スイッチ> </ブラウザルーター> ); } デフォルトのルートをエクスポート;</pre> <p>上下文页面</p> <pre class="brush:php;toolbar:false;">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> ); } }</pre> <p><br /></p>