React Router me Link aur NavLink Kaise Use Karein (in Hindi)

Anchor Tag के नुकसान:

• State Loss: अगर आपने Redux, React Context API, या local React component state में कोई data store करके रखा है, तो anchor tag के reload होते ही वह सारा dynamic data हवा में गायब हो जाएगा।
• Slow User Experience: User को बार-बार loading screen देखनी पड़ेगी, जो modern user experience के नियमों के खिलाफ है।
• Server Load: बार-बार एक ही assets के लिए server को request भेजने से application performance पर भी असर पड़ता है।

React Router Navigation Setup करने का Step-by-Step तरीका क्या है?

Step 1: Install React Router DOM

npm install react-router-dom

Step 2: Wrap Application inside BrowserRouter

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
import './index.css';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.createRoot(document.getElementById('root')).render(
  
    
      
    
  
);

Step 3: Define Routes in App.jsx

import { Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';
import Navbar from './components/Navbar';

function App() {
  return (
    

      
      

        
          
          
          
        
      
    
  );
}

export default App;

<Link> Component क्या है और इसे कैसे use करें?

Link Component का basic syntax:

import { Link } from 'react-router-dom';

// Component के अंदर इस तरह use करें:
<Link to="/about">About Us</Link>

Link के Advanced Attributes (Props):

1. to (String or Object): यह destination specify करता है। आप इसमें string के अलावा configuration object भी pass कर सकते हैं:

   <Link to={{ pathname: "/about", search: "?tab=details" }}>About</Link>

2. replace (Boolean): अगर आप Browser History stack में current page को replace करना चाहते हैं, तो इसका use करें। इसे true करने पर, back click करने पर user previous path पर वापस नहीं जा पाएगा:

   <Link to="/dashboard" replace>Go to Dashboard</Link>

3. state (Any): यह feature सोने पर सुहागा है! इसकी मदद से आप बिना URL query params change किए location object में secure components dynamic raw state data pass कर सकते हैं:

   <Link to="/contact" state={{ fromHomepage: true }}>Contact</Link>

<NavLink> Component क्या है और यह <Link> से कैसे अलग है?

NavLink का default dynamic behavior:

// Browser default output dynamically when on /about:
<a href="/about" class="active">About</a>

Dynamic Styling apply करने के तरीके:

1. Custom dynamic class handle करना:

import { NavLink } from 'react-router-dom';

function Navigation() {
  return (
    <NavLink 
      to="/about" 
      className={({ isActive }) => isActive ? 'my-custom-active-class' : 'normal-class'}
    >
      About
    </NavLink>
  );
}

2. Dynamic inline styles handle करना:

<NavLink 
  to="/contact" 
  style={({ isActive }) => ({
    color: isActive ? '#06b6d4' : '#64748b',
    fontWeight: isActive ? 'bold' : 'normal'
  })}
>
  Contact
</NavLink>

3. end prop का use (Very Important!):

<NavLink to="/" end className={({ isActive }) => isActive ? "active" : ""}>
  Home
</NavLink>

<Link> vs <NavLink> में क्या अंतर है? (Comparison Table)

Complete Implementation Code (Production-Ready)

1. Navbar.jsx Component

import { NavLink } from 'react-router-dom';
import './Navbar.css';

export default function Navbar() {
  return (
    <nav className="main-navbar">
      <div className="nav-logo">
        <h2>DevPortal</h2>
      </div>
      <ul className="nav-links">
        <li>
          <NavLink 
            to="/" 
            end 
            className={({ isActive }) => isActive ? "nav-item active-link" : "nav-item"}
          >
            Home
          </NavLink>
        </li>
        <li>
          <NavLink 
            to="/about" 
            className={({ isActive }) => isActive ? "nav-item active-link" : "nav-item"}
          >
            About
          </NavLink>
        </li>
        <li>
          <NavLink 
            to="/contact" 
            className={({ isActive }) => isActive ? "nav-item active-link" : "nav-item"}
          >
            Contact
          </NavLink>
        </li>
      </ul>
    </nav>
  );
}

2. Navbar.css Stylesheet

.main-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #0f172a;
  padding: 15px 30px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.nav-logo h2 {
  color: #06b6d4;
  margin: 0;
  font-family: sans-serif;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
}

.nav-item {
  color: #94a3b8;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.nav-item:hover {
  color: #f8fafc;
  background-color: #1e293b;
}

/* Active Class Dynamic Styles styling injected by NavLink */
.active-link {
  color: #ffffff !important;
  background-color: #06b6d4;
  box-shadow: 0 4px 10px rgba(6, 182, 212, 0.3);
}

Common Routing Errors और उन्हें कैसे Fix करें?