React Router: प्रोग्रामेटिक नेविगेशन बिना किसी परेशानी और धीमेपन के

React में नेविगेशन: सिर्फ लिंक पर क्लिक नहीं

क्या आपने कभी सोचा है कि React Router को उपयोगकर्ता के क्लिक के बजाय कोड से किसी दूसरे पेज पर कैसे ले जाया जाए? उदाहरण के लिए, फॉर्म सफलतापूर्वक सबमिट होने के बाद, प्रमाणीकरण के बाद या सिर्फ 5 सेकंड बाद? यदि हाँ, तो आप सही जगह पर हैं। सवाल "How can I programmatically navigate using React Router?" Stack Overflow पर सबसे लोकप्रिय प्रश्नों में से एक है, और यह कोई संयोग नहीं है। यह सरल लगता है, लेकिन वास्तव में इसमें कई छिपी हुई समस्याएं हैं, खासकर जब प्रदर्शन की बात आती है।

इस लेख में, हम सिर्फ useNavigate का उपयोग करना नहीं दिखाएंगे। हम यह समझेंगे कि इसे सही, तेज़ और बिना किसी देरी के कैसे करें। आप जानेंगे कि कौन से पैटर्न मेमोरी लीक का कारण बनते हैं और कौन से बिजली की गति से नेविगेशन देते हैं। चलिए शुरू करते हैं!

क्लासिक: useNavigate — आपका मुख्य उपकरण

React Router v6 से शुरू करते हुए, useNavigate ने पुराने useHistory को बदल दिया है। यह एक हुक है जो navigate फ़ंक्शन लौटाता है। यह इस तरह दिखता है:

import { useNavigate } from 'react-router-dom';\n\nfunction LoginButton() {\n  const navigate = useNavigate();\n\n  const handleLogin = () => {\n    // यहाँ प्रमाणीकरण का तर्क\n    const user = { name: 'Иван' };\n    // सफलता के बाद — रीडायरेक्ट\n    navigate('/dashboard', { replace: true });\n  };\n\n  return <button onClick={handleLogin}>लॉग इन करें</button>;\n}\n

पैरामीटर { replace: true } पर ध्यान दें। यह इतिहास में वर्तमान प्रविष्टि को बदलता है, न कि नई जोड़ता है। लॉगिन के लिए यह महत्वपूर्ण है, ताकि उपयोगकर्ता लॉगिन पेज पर वापस न आ सके।

कहाँ जा सकते हैं?

\n
• पूर्ण पथ: navigate('/about')
\n
• सापेक्ष पथ: navigate('../settings')
\n
• इतिहास में पीछे/आगे: navigate(-1) या navigate(2)
\n

उन्नत स्तर: घटकों के बाहर नेविगेशन

क्या होगा यदि आपको किसी सामान्य फ़ंक्शन से रीडायरेक्ट करने की आवश्यकता है, न कि React घटक के अंदर? उदाहरण के लिए, Redux में action creator से या axios इंटरसेप्टर से? useNavigate हुक यहाँ काम नहीं करेगा — हुक केवल कार्यात्मक घटकों के अंदर ही कॉल किए जाते हैं।

समाधान: एक कस्टम रैपर घटक बनाएं या ग्लोबल राउटर ऑब्जेक्ट का उपयोग करें। React Router v6 में इसके लिए विशेष घटक RouterProvider और createBrowserRouter हैं, लेकिन एक सरल तरीका भी है — navigate का संदर्भ एक वेरिएबल में सहेजना।

// router.js\nimport { createBrowserRouter, RouterProvider } from 'react-router-dom';\n\nexport const router = createBrowserRouter([...]);\n\n// navigation.js — नेविगेशन के लिए अलग मॉड्यूल\nlet navigateFunction = null;\n\nexport const setNavigate = (navigate) => {\n  navigateFunction = navigate;\n};\n\nexport const navigateTo = (path) => {\n  if (navigateFunction) {\n    navigateFunction(path);\n  } else {\n    console.warn('नेविगेशन अभी तैयार नहीं है');\n  }\n};\n\n// App.js\nimport { useNavigate } from 'react-router-dom';\nimport { setNavigate } from './navigation';\nimport { useEffect } from 'react';\n\nfunction App() {\n  const navigate = useNavigate();\n\n  useEffect(() => {\n    setNavigate(navigate);\n  }, [navigate]);\n\n  return /* आपका कोड */;\n}\n

अब किसी भी फ़ंक्शन से (चाहे setTimeout से हो या fetch से) आप navigateTo('/home') कॉल कर सकते हैं। सुविधाजनक? हाँ। सुरक्षित? केवल तभी जब आप घटक के अनमाउंट होने पर संदर्भ को साफ़ करना न भूलें।

प्रदर्शन अनुकूलन: आपका एप्लिकेशन धीमा क्यों चल रहा है?

प्रोग्रामेटिक नेविगेशन सिर्फ एक फ़ंक्शन कॉल नहीं है। यह पेज के पूर्ण पुनर्संरचना (re-render) के लिए एक ट्रिगर है। और यदि आप इसे