React Router Setup करना
In this page:
import { BrowserRouter, Routes, Route } from "react-router-dom";
<BrowserRouter>
<Routes>
<Route path="/path" element={<PageComponent />} />
</Routes>
</BrowserRouter>Client-Side Routing की ज़रूरत क्यों है
एक single-page React app के पास सिर्फ एक असली HTML page होता है, लेकिन users अब भी expect करते हैं कि अलग URLs अलग content दिखाएं (जैसे /about vs /contact) एक पूरे page reload के बिना।
React Router URL changes सुनता है और swap कर देता है कि कौन सा component render हो, navigation को instant रखते हुए।
उदाहरण: Why Client-Side Routing Is Needed
// Run in your local React project (npm install required)
import { BrowserRouter, Routes, Route } from 'react-router-dom';
function Home() { return <p>Home Page</p>; }
function About() { return <p>About Page</p>; }
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>
);
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
Install करना और अपना App Wrap करना
react-router-dom install करने के बाद, पहला setup step आपके top-level App component (या render call खुद) को एक single <BrowserRouter> में wrap करना है। जिसे भी routing चाहिए — Routes, Link, useNavigate — सिर्फ इस wrapper के अंदर काम करता है।
उदाहरण: Installing and Wrapping Your App
// Run in your local React project (npm install required)
import { BrowserRouter } from 'react-router-dom';
import ReactDOM from 'react-dom/client';
import App from './App';
ReactDOM.createRoot(document.getElementById('root')).render(
<BrowserRouter>
<App />
</BrowserRouter>
);⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
उदाहरण: Installing react-router-dom
$ npm install react-router-dom
added 3 packages in 2s⚠️ Run this in your own terminal or Node.js environment.
react-router-dom vs. react-router
React Router कई packages के रूप में publish होता है: react-router के पास core routing logic है, जबकि react-router-dom इसके ऊपर web-specific pieces (BrowserRouter, Link) जोड़ता है।
किसी भी browser-based web app के लिए, आपको हमेशा react-router-dom चाहिए, bare core package नहीं।
उदाहरण: Installing the Right Package
# Correct -- for any browser-based web app
npm install react-router-dom
# Wrong -- missing BrowserRouter, Link, and other DOM bindings
npm install react-router⚠️ Run this in your own terminal or Node.js environment.
- App को <BrowserRouter> में wrap करना भूल जाना, इसलिए routing components के पास router context तक कोई access नहीं है।
- <Link> के बजाय regular <a> tags उपयोग करना, जो client-side navigation के बजाय एक पूरा page reload cause करता है।
- एक web project के लिए react-router-dom के बजाय react-router install करना — वे अलग packages हैं।
- React Router React web apps में client-side routing के लिए standard npm library है।
- BrowserRouter को routing enable करने के लिए आपके app को root के पास एक बार wrap करना चाहिए।
- Routes और Route components declare करते हैं कि किस URL path के लिए कौन सा component render हो।
- यह एक अलग npm package (react-router-dom) है जिसका इस preview में कोई CDN UMD build wired नहीं है।
npm install react-router-dom चाहिए — इस sandbox में CDN से available नहीं; v6+ React 16.8+ के साथ काम करता है।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: