當您注冊/登錄/重繪 頁面時，登錄頁面會在轉到正確頁面之前閃爍。我嘗試放入一個加載器，但它所做的只是在它閃爍然后轉到正確的頁面之前做一個加載器影片。知道如何讓這種情況不會發生嗎？

function App(){
  const [user, setUser] = useState();
  const [loading, setLoad] = useState(true);
  useEffect(() => {
    const unsubscribe = onAuthStateChanged(getAuth(), setUser, setLoad(false))
    return () => {unsubscribe()}
  }, [])
const AuthenticatedRoute = ({children}) => {
  let isAuthenticated;
    if(user !=null){
      isAuthenticated = true;
    }else{
      isAuthenticated = false;
    }
    if(!loading){
      return isAuthenticated? children: <Navigate to="/signin"/>
    }else{
      return <Loading/>
    }
  
}

const UnauthenticatedRoute = ({children}) => {
  let isAuthenticated;
    if(user !=null){
      isAuthenticated = true;
    }else{
      isAuthenticated = false;
    }
    if(!loading){
      return !isAuthenticated? children: <Navigate to="/home"/>
    }else{
      return <Loading/>
    }
  
}

      return(
      <Router>
      <div className="App">
          {
          <Routes>
            <Route exact path="/" element={<UnauthenticatedRoute><PreHome/></UnauthenticatedRoute>}/>
            <Route path='/home' element={<AuthenticatedRoute><Home/></AuthenticatedRoute>} />
            <Route exact path="/signin" element={<UnauthenticatedRoute><Signin/></UnauthenticatedRoute>} />
            <Route exact path="/signup" element={<UnauthenticatedRoute><Signup/></UnauthenticatedRoute>} />
          </Routes>
          }
      </div>
      </Router>
      )
  }

退出代碼：這一行一直用于退出

<button onClick={() => signOut(getAuth())}>Sign Out</button>

登錄代碼：

async function OnFormSubmit(e){
        e.preventDefault();
        const auth = getAuth();
        try{
            isLoading(true);
            await signInWithEmailAndPassword(auth, email, pw)
            isLoading(false);
        }catch(err){
            console.log(err)
        }
    }

uj5u.com熱心網友回復：

問題

1. 加載狀態只有在出現錯誤時才會被清除onAuthStateChanged。
2. 路由保護器組件在另一個 React 組件中宣告。這是反模式。當每次父App組件重新渲染時宣告這些組件的新“實體”時，它將卸載/安裝組件的 subReactTree。
3. 在決定重定向或呈現路由內容之前，組件不會等待用戶的身份驗證狀態得到解決。

解決方案

• 將路由保護器組件自行移出。為要渲染的Outlet嵌套路由渲染一個。這允許您將它們呈現為布局路由，而不是單獨的包裝器組件。
• 使用適當的“加載”狀態。使用未定義user狀態作為“加載狀態”。

例子：

import { Outlet, Navigate } from 'react-router-dom';

const AuthenticatedRoute = ({ user }) => {
  if (user === undefined) return <Loading />;

  return user
    ? <Outlet />
    : <Navigate to="/signin" />;
};

const UnauthenticatedRoute = ({ user }) => {
  if (user === undefined) return <Loading />;

  return user
    ? <Navigate to="/home" />
    : <Outlet />;
};

...

function App(){
  const [user, setUser] = useState();

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(getAuth(), setUser);
    return unsubscribe;
  }, []);

  return(
    <AuthContextProvider>
      <Router>
        <div className="App">
          <Routes>
            <Route element={<UnauthenticatedRoute user={user} />}>
              <Route path="/" element={<PreHome />} />
              <Route path="/signin" element={<Signin />} />
              <Route path="/signup" element={<Signup />} />
            </Route>
            <Route element={<AuthenticatedRoute user={user} />}>
              <Route path='/home' element={<Home />} />
            </Route>
          </Routes>
        </div>
      </Router>
    </AuthContextProvider>
  );
}

標籤：javascript 反应 火力基地 反应钩子 反应路由器

上一篇：根據檔案，資料沒有更新到firestore資料庫中，代碼是正確的

下一篇：反應腳本沒有加載到網頁上？