Protected-private-routes-react-router-dom-v6

home.js

function Home() {
  return <div>This is my Home Page</div>;
}

export default Home;

PrivateRoute.js

import { Navigate, Outlet } from "react-router-dom";

function PrivateRoute({ isLogged }) {
  return isLogged ? <Outlet /> : <Navigate to="/" />;
}

export default PrivateRoute;

profile.js

function Profile() {
  return <div>THis is my Profile</div>;
}

export default Profile;

ProtectedRouteApp.js

https://github.com/syed-ashraf123/protected-private-routes-react-router-dom-v6/blob/master/src/App.js

import logo from "./logo.svg";
import "./App.css";
import Home from "./Home";
import Profile from "./Profile";
import PrivateRoute from "./PrivateRoute";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import { useState } from "react";
function App() {
  const [isLogged, setIsLogged] = useState(false);
  return (
    <div className="App">
      <button onClick={() => setIsLogged(true)}>LogIn</button>
      <button onClick={() => setIsLogged(false)}>LogOut</button>
      <Router>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route element={<PrivateRoute isLogged={isLogged} />}>
            <Route path="/profile" element={<Profile />} />
          </Route>
        </Routes>
        <Link to="/profile"> Got to Profile</Link>
      </Router>
    </div>
  );
}

export default App;