xxxxxxxxxx
//PrivateRoute.js
import { useSelector } from "react-redux";
import { Navigate } from "react-router-dom";
function PrivateRoute({ children }) {
const { user } = useSelector((state) => state.user);
const token = localStorage.getItem("token");
if (!token) {
return <Navigate to="/login" replace />;
}
return children;
}
export default PrivateRoute;
// App.js
<Router>
<AuthProvier>
<Routes>
<Route path="login" element={<Login />}></Route>
<Route path="/dashboard" element={<PrivateRoute><Dashboard/></PrivateRoute>}>
<Route path="user" element={<User />} />
<Route path="system" element={<System />} />
<Route path="customer" element={<Customer />} />
<Route path="customer/:id" element={<CustomerDetail />} />
</Route>
<Route path="*" element={<Navigate to="/home" />}></Route>
</Routes>
</AuthProvier>
</Router>
xxxxxxxxxx
//app.js main
return (
<>
<Routes>
<Route
path="/login"
element={<Login setUser={() => setUser(null)} />}
/>
<Route
path="/signup"
element={<RegistrationPage setUser={() => setUser(true)} />}
/>
<Route path="/forgotpassword" element={<ResetPassword />} />
<Route path="/verifyotp" element={<VerifyOTP />} />
<Route path="/newpassword" element={<ResetNewPassword />} />
<Route path="/" element={<ProtectedRoutes isLogged={user} />}>
<Route path="/dasboard" element={<Dashboard />} />
<Route path="/campaigns" element={<Campaigns />} />
<Route path="/smshistory" element={<SmsHistory />} />
<Route path="/contact" element={<ContactList />} />
</Route>
<Route path="*" element={<ErrorPage />} />
</Routes>
</>
);
//protected routing code:
import { Navigate, Outlet} from 'react-router-dom';
const ProtectedRoutes=({isLogged})=>{
console.log("user Login",isLogged);
return isLogged?<Outlet/>:<Navigate to="/signup"/>
}
export default ProtectedRoutes;
xxxxxxxxxx
import { Suspense, useState } from "react";
import { Routes, Route, Navigate } from "react-router-dom";
interface props {
path: string;
MatchComponent: string;
}
const ProtectedRoutes = ({ path, MatchComponent }: props) => {
const [isLoggedIn] = useState(true);
return (
<>
{isLoggedIn ? (
<>
<Routes>
<Route
path={path}
element={
<Suspense fallback={<h1>Loading</h1>}>
<MatchComponent />
</Suspense>
}
/>
</Routes>
</>
) : (
<Routes>
<Route path="*" element={<Navigate to="/" replace />} />
</Routes>
)}
</>
);
};
export default ProtectedRoutes;