जानें कि रिएक्ट राउटर के नवीनतम संस्करण के साथ अपने यूआरएल को कैसे प्रबंधित करें।
रिएक्ट राउटर सबसे लोकप्रिय लाइब्रेरी है जिसका उपयोग आप रिएक्ट अनुप्रयोगों में रूटिंग लागू करने के लिए कर सकते हैं। यह पेज नेविगेशन, क्वेरी पैरामीटर और कई अन्य सहित विभिन्न रूटिंग कार्यों को संभालने के लिए एक घटक-आधारित दृष्टिकोण प्रदान करता है।
रिएक्ट राउटर V6 रूटिंग एल्गोरिदम में कुछ महत्वपूर्ण बदलाव पेश करता है, ताकि इसके पुराने संस्करण में मौजूद कमियों को दूर किया जा सके और एक बेहतर रूटिंग समाधान प्रदान किया जा सके।
रिएक्ट राउटर V6 का उपयोग करके रूटिंग शुरू करना
प्रारंभ करना, एक रिएक्ट एप्लिकेशन बनाएं. वैकल्पिक रूप से, Vite का उपयोग करके एक रिएक्ट प्रोजेक्ट सेट करें. प्रोजेक्ट बनाने के बाद, आगे बढ़ें, और इंस्टॉल करें प्रतिक्रिया-राउटर-डोम पैकेट।
npm install react-router-domरिएक्ट राउटर का उपयोग करके रूट बनाना
रूट बनाने के लिए, संपूर्ण एप्लिकेशन को a से लपेटकर प्रारंभ करें ब्राउज़रराउटर अवयव। अपने में कोड अपडेट करें Index.jsx या मुख्य.जेएसएक्स फ़ाइल इस प्रकार है:
import React from'react'
import ReactDOM from 'react-dom/client'
import App from'./App.jsx'
import { BrowserRouter as Router } from'react-router-dom';
ReactDOM.createRoot(document.getElementById('root')).render(
</Router>
</React.StrictMode>,
)
ऐप घटक को ब्राउज़र राउटर घटक के साथ लपेटने से यह सुनिश्चित होता है कि पूरे एप्लिकेशन को रिएक्ट राउटर लाइब्रेरी द्वारा पेश किए गए रूटिंग संदर्भ और सुविधाओं तक पहुंच मिलती है।
रूट घटक का उपयोग करना
एक बार जब आप एप्लिकेशन को ब्राउज़र राउटर घटक के साथ लपेट लेते हैं, तो आप अपने मार्गों को परिभाषित कर सकते हैं।
मार्गों घटक का सुधार है बदलना घटक जो पहले रिएक्ट राउटर v5 द्वारा उपयोग किया गया था। यह घटक सापेक्ष रूटिंग, स्वचालित रूट रैंकिंग और नेस्टेड मार्गों के साथ काम करने की क्षमता का समर्थन करता है।
आमतौर पर, आप अपने एप्लिकेशन के उच्चतम स्तर पर, अक्सर ऐप घटक के भीतर रूट जोड़ेंगे। हालाँकि, आप अपने प्रोजेक्ट की संरचना के आधार पर उन्हें किसी अन्य स्थान पर परिभाषित कर सकते हैं।
खोलें ऐप.जेएसएक्स फ़ाइल करें और बॉयलरप्लेट रिएक्ट कोड को निम्नलिखित से बदलें:
import'./App.css'
import { Routes, Route } from'react-router-dom';
import Dashboard from'./pages/Dashboard';
import About from'./pages/About';functionApp() {
return (
<>"/" element={ } /> "/about" element={ } />
</Routes>
</>
)
}
exportdefault App
यह रूटिंग कॉन्फ़िगरेशन विशिष्ट URL पथों को संबंधित पृष्ठ घटकों (डैशबोर्ड) पर मैप करता है और इसके बारे में), यह सुनिश्चित करना कि जब कोई उपयोगकर्ता किसी विशेष पर जाता है तो ऐप उचित घटक प्रस्तुत करता है यूआरएल.
ध्यान दें तत्व प्रोप, रूट घटक के भीतर, जो आपको केवल घटक के नाम के विपरीत एक कार्यात्मक घटक को पारित करने देता है। इससे मार्गों और उनके संबंधित घटकों के नीचे प्रॉप्स को पारित करना संभव हो जाता है।
में स्रोत निर्देशिका, एक नई बनाएँ पृष्ठों निर्देशिका, और दो नई फ़ाइलें जोड़ें: डैशबोर्ड.जेएसएक्स और के बारे में.jsx. आगे बढ़ें और मार्गों का परीक्षण करने के लिए इन फ़ाइलों के भीतर कार्यात्मक घटकों को परिभाषित करें।
मार्गों को परिभाषित करने के लिए createBrowserRouter का उपयोग करना
रिएक्ट राउटर का दस्तावेज़ीकरण का उपयोग करने की अनुशंसा करता है ब्राउज़रराउटर बनाएं रिएक्ट वेब अनुप्रयोगों के लिए रूटिंग कॉन्फ़िगरेशन को परिभाषित करने के लिए घटक। यह घटक एक हल्का विकल्प है ब्राउज़रराउटर जो मार्गों की एक श्रृंखला को अपने तर्क के रूप में लेता है।
इस घटक का उपयोग करके, ऐप घटक के भीतर अपने मार्गों को परिभाषित करने की कोई आवश्यकता नहीं है। इसके बजाय, आप अपने सभी रूट कॉन्फ़िगरेशन की रूपरेखा तैयार कर सकते हैं Index.jsx या मुख्य.जेएसएक्स फ़ाइल।
आप इस घटक का उपयोग कैसे कर सकते हैं इसका एक उदाहरण यहां दिया गया है:
import React from'react'
import ReactDOM from'react-dom/client'
import { createBrowserRouter, RouterProvider } from"react-router-dom";
import App from'./App.jsx'
import Dashboard from'./pages/Dashboard';
import About from'./pages/About';const router = createBrowserRouter([
{
path: "/",
element: <App />,
},
{
path: "/dashboard",
element: <Dashboard />,
},
{
path: "/about",
element: <About />,
},
]);
ReactDOM.createRoot(document.getElementById("root")).render(
</React.StrictMode>
);
रूटिंग कॉन्फ़िगरेशन का उपयोग करता है ब्राउज़रराउटर बनाएं और राउटर प्रदाता रिएक्ट एप्लिकेशन के लिए रूटिंग सिस्टम बनाने के लिए घटक।
हालाँकि, इस कार्यान्वयन में एकमात्र अंतर यह है कि, यह ब्राउज़रराउटर घटक का उपयोग करके एप्लिकेशन को लपेटने के बजाय इसका उपयोग करता है राउटर प्रदाता पारित करने के लिए घटक रूटर एप्लिकेशन में सभी घटकों के संदर्भ में।
पेज-नॉट-फाउंड रूट लागू करना
पथ रूट घटक में प्रोप, आवश्यक घटक को प्रस्तुत करने से पहले यह निर्धारित करने के लिए कि क्या कोई मिलान है, वर्तमान यूआरएल के साथ दिए गए पथ की तुलना करता है।
ऐसे मामलों को संभालने के लिए जहां कोई रूट मेल नहीं खाता, आप एक विशिष्ट रूट बना सकते हैं जो प्रबंधन करेगा 404 पृष्ठ में त्रुटियाँ नहीं मिलीं. इस मार्ग को शामिल करने से यह सुनिश्चित होता है कि उपयोगकर्ता उन स्थितियों में सार्थक प्रतिक्रिया प्राप्त कर सकते हैं जहां उन्होंने एक गैर-मौजूद यूआरएल तक पहुंच बनाई है।
404 रूट लागू करने के लिए, इस रूट को रूट घटक के भीतर जोड़ें:
// using the Route component"*" element={ } />
// using createBrowserRouter
{ path: "*", element: <NotFound />, },
फिर, एक कस्टम बनाएं NotFound.jsx घटक और अंत में, सीएसएस मॉड्यूल का उपयोग करके घटक को स्टाइल करें.
तारांकन चिह्न (*) एक वाइल्डकार्ड वर्ण है जो उन परिदृश्यों को संभालता है जहां कोई भी निर्दिष्ट मार्ग वर्तमान यूआरएल से मेल नहीं खाता है।
प्रोग्रामेटिक नेविगेशन, यूज़नेविगेट हुक का उपयोग करना
नेविगेशन का उपयोग करें हुक अनुप्रयोगों में नेविगेशन को संभालने के लिए एक प्रोग्रामेटिक तरीका प्रदान करता है। यह हुक विशेष रूप से तब उपयोगी होता है जब आप उपयोगकर्ता इंटरैक्शन या घटनाओं, जैसे बटन क्लिक या फॉर्म सबमिशन के जवाब में नेविगेशन ट्रिगर करना चाहते हैं।
आइए देखें कि इसका उपयोग कैसे करें नेविगेशन का उपयोग करें प्रोग्रामेटिक नेविगेशन के लिए हुक. यह मानते हुए कि आपने बनाया है के बारे में.jsx कार्यात्मक घटक, रिएक्ट राउटर पैकेज से हुक आयात करें:
import { useNavigate } from'react-router-dom';फिर एक बटन जोड़ें, जिस पर क्लिक करने पर, नेविगेशन एक निर्दिष्ट मार्ग पर ट्रिगर हो जाता है।
functionAbout() {
const navigate = useNavigate();const handleButtonClick = () => {
navigate("/");
};return (
<>
// Rest of the code ...
exportdefault About;
यह उल्लेखनीय है कि रिएक्ट राउटर v6 में पेश किया गया यूज़नेविगेट हुक और यूज़नेविगेशन हुक, उनके निकट से संबंधित नामों के बावजूद अलग-अलग उद्देश्यों की पूर्ति करते हैं।
यूज़नेविगेशन हुक आपको नेविगेशन से संबंधित विवरण, जैसे चालू नेविगेशन स्थिति और अन्य विशिष्टताओं तक पहुंचने में सक्षम बनाता है। यह तब उपयोगी होता है जब आप चल रही प्रक्रियाओं के बारे में दृश्य प्रतिक्रिया प्रदान करने के लिए स्पिनर लोड करने जैसे यूआई तत्वों को प्रस्तुत करना चाहते हैं।
यहां एक उदाहरण दिया गया है कि आप यूज़नेविगेशन हुक का उपयोग कैसे कर सकते हैं।
import { useNavigation } from"react-router-dom";functionSubmitButton() {
const navigation = useNavigation();const buttonText =
navigation.state "submitting"
? "Saving..."
: navigation.state "loading"
? "Saved!"
: "Go";
return<buttontype="submit">{buttonText}button>;
}
इस उदाहरण में, जमा करने वाला बटन घटक यूज़नेविगेशन हुक से प्राप्त नेविगेशन स्थिति के आधार पर अपने टेक्स्ट को गतिशील रूप से अपडेट करेगा।
हालाँकि इन हुकों की अलग-अलग भूमिकाएँ हैं, फिर भी आप इन्हें एक साथ उपयोग कर सकते हैं। नेविगेशन प्रक्रिया शुरू करने के लिए नेविगेशन हुक का उपयोग करें और वास्तविक समय नेविगेशन विवरण प्राप्त करने के लिए नेविगेशन हुक का उपयोग करें, जो ब्राउज़र पर प्रस्तुत करने के लिए फीडबैक यूआई के प्रकार का मार्गदर्शन करता है।
यूज़रूट्स हुक का उपयोग करना
यह हुक आपको किसी ऑब्जेक्ट के भीतर उनके संबंधित घटकों के साथ-साथ मार्ग पथों को परिभाषित करने देता है। इसके बाद, हुक का उपयोग मार्गों से मिलान करने और संबंधित घटकों को प्रदर्शित करने के लिए किया जाता है।
हुक का उपयोग कैसे करें इसका एक सरल उदाहरण यहां दिया गया है:
import { useRoutes } from'react-router-dom';
import Dashboard from'./Dashboard';
import About from'./About';const routes = [
{
path: '/',
element: <Dashboard/>,
},
{
path: '/about',
element: <About />,
},
];functionApp() {
const routeResult = useRoutes(routes);
return routeResult;
}
exportdefault App;
इस उदाहरण में, मार्ग ऑब्जेक्ट घटकों के लिए यूआरएल पथों की मैपिंग को परिभाषित करता है। अनुप्रयोग घटक तब वर्तमान URL से मिलान करने और मिलान किए गए मार्ग के आधार पर उपयुक्त घटक प्रस्तुत करने के लिए इस हुक का उपयोग करता है।
इस हुक का उपयोग करने से आपको अपने रूटिंग लॉजिक पर विस्तृत नियंत्रण मिलता है और आप आसानी से अपने एप्लिकेशन के लिए कस्टम रूट-हैंडलिंग लॉजिक बना सकते हैं।
रिएक्ट एप्लिकेशन में रूटिंग को संभालना
हालाँकि रिएक्ट में रूटिंग कार्यों को संभालने के लिए पूर्व-निर्मित तंत्र शामिल नहीं है, रिएक्ट राउटर इस अंतर को भरता है। यह विभिन्न रूटिंग घटक और उपयोगिता फ़ंक्शन प्रदान करता है जिनका उपयोग आप आसानी से इंटरैक्टिव, उपयोगकर्ता-अनुकूल एप्लिकेशन बनाने के लिए कर सकते हैं।
