使用私有路由后 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)