Protected/Private Routes बनाना
In this page:
function RequireAuth({ children }) {
if (!isLoggedIn) return <Navigate to="/login" replace />;
return children;
}
<Route path="/private" element={<RequireAuth><PrivatePage /></RequireAuth>} />एक RequireAuth Wrapper बनाना
एक RequireAuth component check करता है कि user authenticated है या नहीं, और या तो इसके children (protected page) render करता है या कहीं और redirect करता है।
इस component में एक Route के element को wrap करना protected pages तक direct URL access block करता है, सिर्फ इनका link hide करने के बजाय।
उदाहरण: Building a RequireAuth Wrapper
// Run in your local React project (npm install required)
import { Navigate } from 'react-router-dom';
function RequireAuth({ isLoggedIn, children }) {
if (!isLoggedIn) return <Navigate to="/login" replace />;
return children;
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
Declarative Redirects के लिए Navigate उपयोग करना
Navigate component एक redirect करता है इसके render होने वाली चीज़ के हिस्से के रूप में, useNavigate() जैसा एक imperative function call करने के बजाय। <Navigate to='/login' /> render करना immediately browser को /login पर redirect कर देता है — RequireAuth wrapper जैसे conditional JSX के अंदर useful।
उदाहरण: Using Navigate for Declarative Redirects
// Run in your local React project (npm install required)
import { Routes, Route, Navigate } from 'react-router-dom';
function Dashboard({ isLoggedIn }) {
if (!isLoggedIn) return <Navigate to="/login" />;
return <p>Welcome to your dashboard</p>;
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
Route Tree में एक Protected Route Wrap करना
RequireAuth को अपने route definitions के साथ combine करने का मतलब है एक protected page के element को Route declaration में सीधे <RequireAuth>...</RequireAuth> में wrap करना।
यह auth check को routing configuration के साथ colocated रखता है, एक नज़र में देखना आसान कि कौन से routes protected हैं।
उदाहरण: Wrapping a Protected Route in the Route Tree
// Run in your local React project (npm install required)
import { Routes, Route } from 'react-router-dom';
function RequireAuth({ isLoggedIn, children }) {
return isLoggedIn ? children : <p>Redirecting to login...</p>;
}
function Dashboard() { return <p>Protected dashboard content</p>; }
function AppRoutes({ isLoggedIn }) {
return (
<Routes>
<Route path="/dashboard" element={<RequireAuth isLoggedIn={isLoggedIn}><Dashboard /></RequireAuth>} />
</Routes>
);
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
- सिर्फ एक protected page का link hide करना, इसमें direct URL access को actually block किए बिना।
- Protected content briefly render होने के बाद authentication status check करना, private content का एक flash cause करते हुए।
- Originally-requested URL preserve करना भूल जाना, ताकि user login करने के बाद वहीं वापस land करे।
- एक protected route इसके element को एक check में wrap करता है जो unauthenticated users को कहीं और redirect करता है।
- यह आमतौर पर render करने से पहले एक boolean (जैसे isLoggedIn) check करने वाले एक छोटे wrapper component के रूप में बनाया जाता है।
- Navigate component declaratively एक redirect perform करता है, एक component जो render करता है उसके हिस्से के रूप में।
- असली security को अब भी server-side checks चाहिए — client-side route protection सिर्फ UI control करता है।
npm install react-router-dom चाहिए — इस sandbox में CDN से available नहीं।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: