Блог

Для создания индивидуального частного маршрутизатора в соответствии с currentUser приведенным ниже кодом:

AuthContext.js:

 import React, {useState, useEffect, useContext} from 'react';
import {auth} from '../Database/Firebase';

const AuthContext = React.createContext();

const useAuth = () => {
          return useContext(AuthContext);
}

const AuthProvider = (props) =>{
          const [currentUser, setCurrentUser] = useState({});
          const signup = (email, password) =>{
                    return auth.createUserWithEmailAndPassword(email, password);
          }

          const login = (email, password) =>{
                    return auth.signInWithEmailAndPassword(email, password);
          }
          
          const logout =() =>{
                    return auth.signOut();
          }

          useEffect(() =>{
                    const unscubscribe = auth.onAuthStateChanged((user) =>{
                              setCurrentUser(user);
                    });
                    return unscubscribe;
          }, []);

          return (
                    <AuthContext.Provider value={{currentUser, signup, login, logout}}>
                    {props.children}
                    </AuthContext.Provider>
          );
}

export { AuthProvider, useAuth};
 

PrivateRoute.js:

 import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import {useAuth} from "../UserAuthentication/AuthContext";

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

export default PrivateRoute;
 

Проблема в прикрепленном файле, чтобы показать ошибку:

Примечание: Я пытаюсь найти эту ошибку, но я должен ее решить, и я думаю, что смогу это сделать с помощью членов stackoverflow. Теперь я объявил объекты const {currentUser} = useAuth(); как, и они взяты из AuthContext.js файла с тем же именем. Но почему он показал ошибку, я не знаю.

Вам нужно использовать AuthProvider его, прежде чем вы сможете его использовать useAuth . Измените значение контекста для него undefined , и вы получите ошибку, как вы ее видите.