<p>ダッシュボード ページ用に PrivateRoute が作成されました。ログインしていない場合は URL からアクセスできませんが、ダッシュボード ページを更新すると認証ページにリダイレクトされます。そこでsessionStorageを追加しましたが、更新するとページにリダイレクトし続けるため、コンソールに「ブラウザがハングしないようにナビゲーションを調整しています」と表示されます。</p> <p>//以下は代詞</p> <p>//App.js</p> <pre class="brush:php;toolbar:false;">import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; 「./components/dashboard」からダッシュボードをインポートします。 「./components/auth」から認証をインポートします。 "./PrivateRoute" から PrivateRoute をインポートします。 関数 App() { 戻る （ <ルーター> <ルート> <Route path="/signin" element={<Auth />} /> <ルート パス="/ダッシュボード" 要素={<PrivateRoute> <ダッシュボード /></PrivateRoute>} /> </ルート> </ルーター> ); } デフォルトのアプリをエクスポート;</pre> <p>//PrivateRoute.js</p> <pre class="brush:php;toolbar:false;">import { Navigate } from "react-router-dom"; import { auth } から "./config/firebase"; 関数 PrivateRoute({ 子 }) { const ユーザー = auth.currentUser; // 检查用户か否か既通过身份验证 if (!user) { // 用人は身份验证を通過せず、登録面に向かって再設定します return <「/signin」に移動/ replace/>; } // 使用者は身元証明、渲染保護された経路を通過しました 子供を返す。 } デフォルトの PrivateRoute;</pre> をエクスポートします。 <p>//Auth.js</p> <pre class="brush:php;toolbar:false;">import { useEffect, useState } from "react"; 「react-router-dom」からインポート { useNavigate }; import { auth, googleProvider } から "../config/firebase"; 輸入 { 電子メールとパスワードを使用してユーザーを作成、 ポップアップでサインイン、 サインアウト、 「firebase/auth」から; 関数認証 () { const [電子メール、setEmail] = useState(""); const [パスワード, setPassword] = useState(""); const navigate = useNavigate(); console.log(auth?.currentUser?.email); useEffect(()=> { const userFromStorage = JSON.parse(sessionStorage.getItem("user")); if(userFromStorage){ console.log(userFromStorage); ナビゲート("/ダッシュボード"); } } , [ナビゲート]); constsignIn = async () => { 試す { await createUserWithEmailAndPassword(認証、電子メール、パスワード); sessionStorage.setItem("user" , JSON.stringify(auth.currentUser)); ナビゲート("/ダッシュボード"); } キャッチ (エラー) { コンソール.エラー(エラー); } }; constsignInWithGoogle = async () => { 試す { SignInWithPopup(auth, googleProvider) を待ちます。 sessionStorage.setItem("ユーザー", JSON.stringify(auth.currentUser)); navigate("./ダッシュボード"); }キャッチ (エラー) { コンソール.エラー(エラー); } }; const ログアウト = async () => { 試す { サインアウト（認証）を待ちます; sessionStorage.removeItem("ユーザー"); } キャッチ (エラー) { コンソール.エラー(エラー); } }; 戻る （ <div> <input placeholder="email" onChange={(e) => setEmail(e.target.value)} /> <入力 type="パスワード" プレースホルダー = "パスワード" onChange={(e) => setPassword(e.target.value)} /> <button onClick={signIn}>サインイン</button> <button onClick={signInWithGoogle}>Google でログイン</button> <ボタン onClick={ログアウト}>ログアウト</button> </div> ); }; デフォルトの認証をエクスポート;</pre> <p>初心者なので、このエラーは望ましくありません。改善の余地がある場合は、お気軽にお知らせください。 </p>