404 Pages को Handle करना
In this page:
<Routes>
<Route path="/" element={<Home />} />
<Route path="*" element={<NotFound />} />
</Routes>एक Catch-All Route जोड़ना
path='*' के साथ defined एक Route literally किसी भी URL को match करता है जिसे पहले वाले किसी route ने already match नहीं किया। इसे अपने Routes block के अंदर last Route रखना unmatched URLs को blank page दिखने के बजाय land करने के लिए कहीं देता है।
उदाहरण: Adding a Catch-All Route
// Run in your local React project (npm install required)
import { Routes, Route } from 'react-router-dom';
function Home() { return <p>Home</p>; }
function NotFound() { return <h1>404 - Page Not Found</h1>; }
function AppRoutes() {
return (
<Routes>
<Route path="/" element={<Home />} />
<Route path="*" element={<NotFound />} />
</Routes>
);
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
404 Page को Helpful बनाना
एक अच्छा 404 page 'not found' कहने से ज़्यादा करता है — यह user को reassure करता है और इन्हें recover करने का एक obvious तरीका देता है, आमतौर पर homepage या एक search box का एक link। यह एक dead end को एक छोटे, graceful redirect में बदल देता है।
उदाहरण: Making the 404 Page Helpful
// Run in your local React project (npm install required)
import { Link } from 'react-router-dom';
function NotFound() {
return (
<div>
<h1>404 - Page Not Found</h1>
<p>Sorry, that page doesn't exist.</p>
<Link to="/">Go back home</Link>
</div>
);
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
एक Specific Section के लिए Nested 404s
वही wildcard pattern nested routes के अंदर भी काम करता है, आपके app के एक specific section (जैसे /dashboard/*) को इसका खुद का contextual 'not found' message दिखाने देते हुए app-wide वाले के बजाय, जबकि दूसरे sections अब भी global 404 उपयोग करते हैं।
उदाहरण: Nested 404s for a Specific Section
// Run in your local React project (npm install required)
import { Routes, Route, Outlet } from 'react-router-dom';
function DashboardLayout() { return <div><nav>Dashboard Nav</nav><Outlet /></div>; }
function DashboardNotFound() { return <p>No such dashboard page</p>; }
function AppRoutes() {
return (
<Routes>
<Route path="/dashboard" element={<DashboardLayout />}>
<Route path="*" element={<DashboardNotFound />} />
</Route>
</Routes>
);
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
- बिलकुल wildcard route जोड़ना भूल जाना, unmatched URLs को पूरी तरह blank render होने देते हुए।
- Wildcard route को last के अलावा कहीं और रखना, इसे accidentally दूसरे routes swallow करने देते हुए।
- 404 page को safety वापस जाने का कोई तरीका न देना, जैसे home page का एक link।
- path='*' वाला एक Route किसी भी URL को match करता है जिसे पहले वाले, ज़्यादा specific route ने match नहीं किया।
- यह Routes के अंदर last Route होना चाहिए ताकि यह असली pages को shadow न करे।
- एक अच्छा 404 page बताता है कि क्या हुआ और एक known-good page पर वापस जाने का link offer करता है।
- यह pattern nested routes के लिए भी काम करता है, एक specific section के अंदर unmatched paths catch करते हुए।
npm install react-router-dom चाहिए — इस sandbox में CDN से available नहीं।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: