专用路由v6反应

Question

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

谢谢！

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)

这样，它就不会被定义。

此外，在v6中，在react-router的Route分量中不存在restricted道具。

我希望它能解决你的问题，否则请提供一个可重复的例子，这样更容易找到你面临的问题。

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>
);
};