私有路由 v6 反应

Question

我正在尝试实现到我的 React Web 应用程序的专用路由。我有一个登录名、一个登录应用程序和一个主页，我希望用户只有在登录或登录后才能访问主页。我正在使用 Firebase 身份验证。我知道我的私有路由组件是错误的但是因为我是新手我不知道如何修复它。
我收到 currentuser 未定义的错误。

谢谢！

PrivateRoute.js

export default function PrivateRoute({ children }) {

const currentUser = useAuth()
console.log(currentUser.email)

return currentUser ?(
    <Navigate to="/home" />
  ) : (
    <Navigate to="/signin" />
  );

App.js

function App() {
return (

  <Routes>
    <Route restricted={true} path='/signin' element={<SignInSide/>}/> 
    <Route
      path="/home"
      element={
        <PrivateRoute>
          <Home/>
        </PrivateRoute>
      }
    />

  <Route path='/signup' element={<SignUpside/>}/>
      
  </Routes>

在firebase.js

中使用Auth函数

 // Initialize Firebase
export const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);

  export function useAuth() {
  const [ currentUser, setCurrentUser ] = useState();

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

return currentUser;
}

Answer 1

您的 PrivateRoute 组件没有意义，因为它没有使用 children 道具。您应该在没有用户时重定向到登录页面，或者在有用户时显示子项，不是吗？它可能看起来像这样：

export const PrivateRoute = ({ children }) => {
    const currentUser = useAuth()
    return currentUser ? children : <Navigate to="/signin" />;
};

但是，您的错误似乎不是来自路由器，而是来自您的 useAuth 挂钩。最初，你的用户是未定义的，所以你收到这样的错误是正常的。如果您想注销用户的电子邮件，请尝试执行以下操作：

if(currentUser)
  console.log(currentUser.email)

这样就不会undefined了。

此外，在react-router的Route组件中没有restricted道具，在v6.

希望它能解决您的问题，否则请提供一个可重现的示例，以便更容易定位您面临的问题。

Answer 2

我真的找到问题了。我需要使用上下文提供程序，然后用它包装应用程序

export const AuthContext = createContext();


export const AuthProvider = ({ children }) => {
const [currentUser, setCurrentUser] = useState(null);
const [pending, setPending] = useState(true);

  useEffect(() => {
  auth.onAuthStateChanged((user) => {
  setCurrentUser(user)
  setPending(false)
});
}, []);

if(pending){
  return <>Loading...</>
}

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

私有路由 v6 反应

private routing v6 react

reactjs

react-router

firebase-authentication