Link और NavLink से Navigation
In this page:
import { Link, NavLink } from "react-router-dom";
<Link to="/path">Link text</Link>
<NavLink to="/path" className={({ isActive }) => (isActive ? "active" : "")}>
Link text
</NavLink>Link vs. एक Plain Anchor Tag
एक plain <a href='/about'> browser को एक पूरा page reload करवाता है, सभी React state फेंकते हुए। <Link to='/about'> visually same दिखता है लेकिन click intercept करता है और reload के बिना URL update करता है, app को instantly responsive रखते हुए।
उदाहरण: Link vs. a Plain Anchor Tag
// Run in your local React project (npm install required)
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
function Home() { return <p>Home</p>; }
function About() { return <p>About</p>; }
function App() {
return (
<BrowserRouter>
<Link to="/">Home</Link> | <Link to="/about">About</Link>
<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.
NavLink के साथ Active Link Highlight करना
NavLink exactly Link की तरह काम करता है लेकिन यह भी जानता है कि इसका to path current URL से match करता है या नहीं। यह एक isActive flag को एक function-as-className (या function-as-style) prop को pass करता है, आपको current page से match करने वाले जो भी link को visually highlight करने देते हुए।
उदाहरण: Highlighting the Active Link with NavLink
// Run in your local React project (npm install required)
import { NavLink } from 'react-router-dom';
function Nav() {
return (
<NavLink to="/about" className={({ isActive }) => isActive ? "active-link" : ""}>
About
</NavLink>
);
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
Dynamic Paths के साथ Linking करना
एक Link का to prop dynamically बनाया जा सकता है, जैसे /users/${'{'}user.id{'}'}, एक specific item के page पर point करने के लिए। यही है कि कैसे list items (जैसे एक user list) हर एक अपने detail page से link करते हैं।
/users/${'{'}id{'}'} के बजाय users/${'{'}id{'}'}) एक unexpected relative URL produce कर सकता है।उदाहरण: Linking with Dynamic Paths
// Run in your local React project (npm install required)
import { Link } from 'react-router-dom';
function UserList({ users }) {
return (
<ul>
{users.map(u => <li key={u.id}><Link to={`/users/${u.id}`}>{u.name}</Link></li>)}
</ul>
);
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
- <Link to> के बजाय एक plain <a href> उपयोग करना, एक पूरा page reload और app state खोना cause करते हुए।
- यह भूल जाना कि NavLink Link से अलग है — NavLink एक active styling hook जोड़ता है, Link नहीं।
- to prop सही से उपयोग न करना (यह Link पर to है, href नहीं)।
- Link एक anchor tag render करता है लेकिन click को intercept करता है client-side navigate करने के लिए, reload के बजाय।
- NavLink Link का एक special version है जो जानता है कि यह currently active route पर point कर रहा है या नहीं।
- दोनों react-router-dom से आते हैं और सिर्फ एक BrowserRouter के अंदर काम करते हैं।
- Client-side navigation React state preserve करता है जिसे एक पूरा page reload फेंक देता।
npm install react-router-dom चाहिए — इस sandbox में CDN से available नहीं।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: