I don’t want <Header /> and <Footer /> to be drawn when loading in ProtectedRoutes component.
const ProtectedRoutes = () => {
const [user, setUser] = useState(null)
const [loading, setLoading] = useState(true)
useEffect(() => {
const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
setUser(currentUser)
setLoading(false)
})
return () => unsubscribe()
}, [])
if (loading) {
return <Loader />
}
return user ? <Outlet /> : <Navigate to="/login" />
}
const App = () => {
return (
<Router>
<ScrollToTop />
<Header />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/contact" element={<Contact />} />
<Route path="/pricing" element={<Price />} />
<Route element={<PublicRoutes />}>
<Route path="/registration" element={<Registration />} />
<Route path="/login" element={<Login />} />
</Route>
<Route element={<ProtectedRoutes />}>
<Route path="/account" element={<Account />} />
<Route path="/verify-email" element={<EmailVerification />} />
<Route path="/user-files" element={<FileStorage />} />
</Route>
</Routes>
<Footer />
</Router>
)
}
I want only my <Loader /> component to be displayed when loading on the page.
New contributor
sillyweeboo is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
If you move the header and footer to wrap the Outlet You should get the behaviour your are looking for.
const ProtectedRoutes = () => {
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
setUser(currentUser);
setLoading(false);
});
return () => unsubscribe();
}, []);
if (loading) {
return <Loader />;
}
return user ? (
<>
<Header />
<Outlet />
<Footer />
</>
) : (
<Navigate to="/login" />
);
};