Routes Define करना
In this page:
<Routes>
<Route path="/" element={<Home />} />
<Route path="/path" element={<Page />} />
<Route path="*" element={<NotFound />} />
</Routes>Routes और Route का Relationship
<Routes> एक switchboard की तरह act करता है: यह current URL देखता है और इसके अंदर सिर्फ वह single <Route> render करता है जिसका path match करता है। हर <Route> एक URL path को उस component (element prop के through) के साथ pair करता है जो उस path के लिए दिखाया जाना चाहिए।
उदाहरण: The Routes and Route Relationship
// Run in your local React project (npm install required)
import { BrowserRouter, Routes, Route } from 'react-router-dom';
function Home() { return <p>Home</p>; }
function Contact() { return <p>Contact</p>; }
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</BrowserRouter>
);
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
Wildcard से Unmatched Routes Catch करना
एक <Route path='*'> किसी भी URL को match करता है जो पहले वाले, ज़्यादा specific route से match नहीं हुआ। इसे <Routes> के अंदर last रखना इसे आपके app के explicitly handle न किए हुए किसी भी address के लिए एक catch-all 404 page की तरह act करवाता है।
उदाहरण: Catching Unmatched Routes with a Wildcard
// 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 <p>404 - Not found</p>; }
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.
एक ही Layout के लिए Multiple Routes Render करना
कई अलग paths अलग top-level pages render कर सकते हैं फिर भी same overall app shell (जैसे एक fixed navigation bar) share करते हुए अगर वह shell <Routes> block के बाहर रखा गया हो।
सिर्फ एक specific Route से matched हिस्सा swap होता है जब URL बदलता है।
उदाहरण: Rendering Multiple Routes for the Same Layout
// Run in your local React project (npm install required)
import { Routes, Route } from 'react-router-dom';
function Nav() { return <nav>My Site</nav>; }
function Home() { return <p>Home</p>; }
function About() { return <p>About</p>; }
function App() {
return (
<div>
<Nav />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</div>
);
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
- <Route> पर element prop भूल जाना, जो React Router v6 में required हो गया (v5 के बजाय component उपयोग करता था)।
- Routes को ऐसे order करना कि एक general path accidentally एक ज़्यादा specific एक से पहले match हो जाए।
- <Route> elements को एक <Routes> parent के अंदर wrap न करना — React Router v5 code से एक common leftover।
- <Routes> एक container है जो current URL से match करने वाला पहला <Route> render करता है।
- हर <Route> एक path string को उस element से map करता है जो इसके लिए render होना चाहिए।
- React Router v6 element prop (element={<Home />}) उपयोग करता है v5 के component prop के बजाय।
- '*' का एक path commonly unmatched routes (404 pages) के लिए catch-all के रूप में उपयोग होता है।
npm install react-router-dom (v6 syntax दिखाई गई) चाहिए — इस sandbox में CDN से available नहीं।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: