Ukrywanie sidebara

Jako, że jestem początkujący w reactie i froncie to mam takie pytanko, jak mogę ukryć element, dla osoby niezalogowanej. Chcę wyświetlić stronę Login, dla każdej osoby niezalogowanej jak np. próbuję przejść na /home

I w sumie chciałbym ukryć ten layout, tyle że on ładuje mi się jako pierwszy rozumiem, że w main wyświetla mi wszystko.

import { ReactNode } from "react";
import Drawer from "./sidebar/Drawer";
import { DrawerContextProvider } from "../context/drawer-context";
import Toolbar from "@mui/material/Toolbar";
import Box from "@mui/material/Box";
import Header from './Header';
import Footer from './Footer';

type Props = {
    children: NonNullable<ReactNode>;
};

const Layout: React.FC<Props> = ({ children }) => {

    return (
        <DrawerContextProvider>
            <Box
                sx={{
                    textAlign: "center",
                    display: "none",
                    flexDirection: "column",
                    minHeight: "100vh",
                }}
            >
                <Header />
                <Toolbar />
                <Box
                    sx={{
                        display: "flex",
                        flex: 1,
                    }}
                >
                    <Drawer />
                    <main style={{ flex: 1 }}>{children}</main>
                </Box>
                <Footer />
            </Box>
        </DrawerContextProvider>
    );
};

export default Layout;

Próbowałem dodać to w layout, ale strona mi się cały czas odświeża i jaki counter się odpalił i wysadziłem apke :D

    const navigate = useNavigate();

    useEffect(() => {
        if (getCurrentUser() === null) {
            navigate('/login');
        }
    }, [])

w App.tsx mam tak

import './App.css';
import Layout from './components/Layout';
import {  Route, Routes } from 'react-router-dom';
import { routes } from './routes';


function App() {

  return (

    <Layout>
      <Routes>
        {routes.map(route => (
          <Route path={route.path} element={<route.page />}></Route>
        ))}
      </Routes>
    </Layout>
  );
}

export default App;

Kubuś Puchatek napisał(a):

const navigate = useNavigate();

useEffect(() => {
  if (getCurrentUser() === null) {
    navigate('/login');
  }
}, []);

Pomysł z przekierowaniem dobry, ale oprócz zalogowanego użytkownika musisz także sprawdzać, czy aktualną ścieżką nie jest /login.

Kod może się różnić w zależności od wersji react-router-dom.

Importujemy hook useLocation

import { useLocation, useNavigate } from 'react-router-dom';

i wewnątrz komponentu

const location = useLocation();
const navigate = useNavigate();

useEffect(() => {
  if (getCurrentUser() === null && location.pathname !== '/login') {
    navigate('/login');
  }
}, []);

@Xarviel: niby działa tyle, że wyświetla mi dodatkowe inne elementy, a chciałbym tylko login forme.

{isLogged && <Toolbar />},
gdzie isLogged to stan, props, cokolwiek