使用私有路由后 AuthContext 組件出現問題

Question

我正在關注有關 Firebase 身份驗證組件的本教程。 在 Auth Context 組件中添加私有路由后遇到此問題：

控制台顯示其他錯誤：
#2：

#3：

身份驗證上下文組件：

export const AuthContext = createContext(null);
export const useAuth = () => useContext(AuthContext);

export const AuthProvider = ({ children }) => {
let [currentUser, setCurrentUser] = useState();
const [loadedCredentials, loadingCredentials] = useState(false);

//Other Processes

const loginProcess = (email, password) => {
    return firebase
        .auth()
        .signInWithEmailAndPassword(email, password);
};

//Other Processes

useEffect(() => {
    return firebase.auth().onAuthStateChanged(user => {
        setCurrentUser(user);
        loadingCredentials(true);
    });
}, []);

//Other Processes

return (
    <AuthContext.Provider
        value={ { currentUser, loginProcess } }
        >
        { loadedCredentials && children }
    </AuthContext.Provider>
);}

私有路由組件：

export default function PrivateRoute({ component: Component, ...rest }) {
 
const { currentUser } = useAuth();
return (
    <Route
        {...rest}
        render={props => {
            return currentUser ? <Component {...props} /> : <Redirect to="/login" />
        }}
    ></Route>
);}

登錄組件：

const LogIn = () => {
const [loginStatus, updateStatus] = useState(null);
const { loginProcess } = useAuth();
const history = useHistory();

const loginForm = useFormik({
    //Form values,
    onSubmit: (values) => { loginSubmission(values) }
});

const loginSubmission = (values) => {
    loginProcess(values.email, values.password)
        .then( () => { history.push("/dashboard"); } )
        .catch( (error) => {
            //Error Reporting
        });
};

應用組件：

    const App = () => {
    return (
    <Router>
        <AuthProvider>

        <MainHeader />
        <Switch>

            <Route exact path="/signup">
                    <SignUp />
            </Route>

            <PrivateRoute exact path="/dashboard" component={ <Dashboard /> } />
            //Other Routes

似乎一個初始解切線可行的建議寫出口的有些不同的方式。 進行了更改，但沒有奏效。 假設錯誤來自在 Login 組件中使用 useHistory Hook，盡管當它投入工作時，思路無處可去。 用盡了選擇，對解決這個問題感到有點絕望。

Answer 1

嘗試更改以下行：

<PrivateRoute exact path="/dashboard" component={Dashboard} />

以下是使用您提供的代碼的身份驗證上下文示例：

import { useEffect, useState, createContext } from 'react'
import app from '../utils/firebase'

export const AppContext = createContext()

export const AppProvider = ({ children }) => {
  const [currentUser, setCurrentUser] = useState(null)
  const [authState, setAuthState] = useState(false)

  const loginProcess = (email, password) => {
    return app.auth().signInWithEmailAndPassword(email, password)
  }

  useEffect(() => {
    console.log('state unknown')
    setAuthState(false)
    return app.auth().onAuthStateChanged(user => {
      setCurrentUser(user)
      setAuthState(true)
    })
  }, [currentUser])

  return (
    <AppContext.Provider value={{ currentUser, authState, loginProcess }}>
      {authState && children}
    </AppContext.Provider>
  )
}

export const useProvider = () => useContext(AppContext)