JAVASCRIPT

React Private Route

Private Route--------

import { Navigate,useLocation} from "react-router-dom"
function Protecte({auth, children }) {   
    return auth ? children : <Navigate to="/login" />;
   
}
export default Protecte
-----------------------------------

App.js---
<Route path="/admin" element={
            <Protecte auth={isLoggedIn}>
              <Admin />
            </Protecte>
    }
   />

react router dom private route

//WORKS ON react-router-dom v6
//Using Outlet and Navigate
import { Routes, Route, Outlet, Navigate} from "react-router-dom";

function PrivateOutlet() {
  const auth = useAuth();
  return auth ? <Outlet /> : <Navigate to="/login" />;
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/private-outlet" element={<PrivateOutlet />}>
          <Route element={<Private />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

private route in react js

const PrivateRoute = ({component: Component, ...rest}) => {
  const {isAuthenticated} = rest;

  return (
    <Route {...rest} render={props => (
      isAuthenticated ? (
        <Component {...props}/>
      ) : (
        <Redirect to={{
          pathname: '/login',
          state: {from: props.location}
        }}/>
      )
    )}
    />
  );
};

PrivateRoute.propTypes = {
  isAuthenticated: PropTypes.bool.isRequired,
};

function mapStateToProps(state) {
  return {
    isAuthenticated: state.user.isAuthenticated,
  };
}

export default connect(mapStateToProps)(PrivateRoute);

private routing in react

import React, { useEffect, useState } from "react";
import "./App.css";
import { Routes, Route, Navigate } from "react-router-dom";
// import Home from "./components/Home";
 import Dashboard from "./components/Dashboard";
// import SignIn from "./components/SignIn";
// import PrivateRoute from "./components/PrivateRoute";
// import PublicRoute from "./components/PublicRoute";
import Auth from "./Pages/auth";
import Profile from "./Pages/profile";

const App3 = () => {

  const[auth,setAuth]=useState(null);

  useEffect(() => {
    let user = localStorage.getItem("user");
    user && JSON.parse(user) ? setAuth(true) : setAuth(false);
  }, []);

  useEffect(() => {
    localStorage.setItem("user", auth);
  }, [auth]);


  return (
  
      <Routes>
      {!auth && (
        <Route path="/auth" 
        element={<Auth authenticate={()=>setAuth(true)}/>}
        />   
      )}

        {auth && <>
          <Route path="/profile"
          element={<Profile logout={()=>setAuth(false)}/>} />
          <Route path="/dashboard" element={<Dashboard/>} />
        </>
        
        }
        <Route path="/dashboard" element={<Dashboard />}/>

          <Route path="*" element={<Navigate to={auth ? "/profile" : "/auth"} />} />

        {/* <PublicRoute restricted={false} element={<Home/>} path="/" exact /> 
        <PublicRoute restricted={true} element={<SignIn/>} path="/signin" exact />
        <PrivateRoute element={<Dashboard />} path="/dashboard" exact /> */}
      </Routes>

  );
};

export default App3;