close

यूआरएल फ़ॉर्मेटिंग और Routing रिएक्ट में- उपयोग करने के लिए एक गाइड React Router

रिएक्ट एप्लिकेशन में, यूआरएल फ़ॉर्मेटिंग routing पृष्ठों को नेविगेट करने और संबंधित सामग्री प्रदर्शित करने में महत्वपूर्ण भूमिका निभाता है। रिएक्ट में प्रबंधन के लिए routing हम लाइब्रेरी का उपयोग कर सकते हैं। यहां आपके रिएक्ट एप्लिकेशन में यूआरएल को प्रारूपित करने और संभालने के तरीके के बारे में एक बुनियादी मार्गदर्शिका दी गई है । React Router React Router routing

 

स्थापित करना React Router

टर्मिनल में अपनी प्रोजेक्ट निर्देशिका खोलें और इंस्टॉल करने के लिए निम्न कमांड चलाएँ: React Router npm install react-router-dom

अपने रिएक्ट घटक से आवश्यक घटकों को आयात करें । React Router

 

मार्गों को परिभाषित करें

अपने रिएक्ट एप्लिकेशन को लपेटने और बेस यूआरएल प्रारूप सेट करने के लिए घटक का उपयोग करें । <BrowserRouter>

<Route> अपने एप्लिकेशन में मार्गों को परिभाषित करने के लिए घटक का उपयोग करें ।

उदाहरण:

import { BrowserRouter, Route } from 'react-router-dom';  
  
function App() {  
  return( 
    <BrowserRouter>  
      <Route exact path="/" component={Home} />  
      <Route path="/about" component={About} />  
      <Route path="/products" component={Products} />  
    </BrowserRouter>  
 );  
}

 

Link एस को परिभाषित करें

अपने एप्लिकेशन में नेविगेशन बनाने के लिए घटक का उपयोग करें । <Link> link

उदाहरण:

import { Link } from 'react-router-dom';  
  
function Navigation() {  
  return( 
    <nav>  
      <ul>  
        <li>  
          <Link to="/">Home</Link>  
        </li>  
        <li>  
          <Link to="/about">About</Link>  
        </li>  
        <li>  
          <Link to="/products">Products</Link>  
        </li>  
      </ul>  
    </nav>  
 );  
}

 

पहुंच पथ पैरामीटर

पथ पैरामीटर तक पहुंचने के लिए प्रारूप में <Route> एक विशेषता वाले घटक का उपयोग करें । path /users/:id

द्वारा परिभाषित घटक के भीतर <Route>, आप useParams() पथ पैरामीटर के मानों तक पहुंचने के लिए उपयोग कर सकते हैं।

उदाहरण:

import { useParams } from 'react-router-dom';  
  
function User() {  
  const { id } = useParams();  
  
  return <div>User ID: {id}</div>;  
}

 

उपयोग करें Switch और Redirect

केवल पहले मार्ग को प्रस्तुत करने के लिए घटक का उपयोग करें जो पथ से मेल खाता हो। <Switch>

उपयोगकर्ताओं को एक निर्दिष्ट पथ से दूसरे पथ पर घटक का उपयोग करें । <Redirect> redirect

उदाहरण:

import { Switch, Route, Redirect } from 'react-router-dom';  
  
function App() {  
  return( 
    <BrowserRouter>  
      <Switch>  
        <Route exact path="/" component={Home} />  
        <Route path="/about" component={About} />  
        <Route path="/products" component={Products} />  
        <Redirect to="/" />  
      </Switch>  
    </BrowserRouter>  
 );  
}

 

routing ये यूआरएल फ़ॉर्मेटिंग और रिएक्ट के उपयोग की कुछ बुनियादी अवधारणाएँ हैं । का उपयोग करके, आप URL के आधार पर विभिन्न सामग्री को नेविगेट करने और प्रदर्शित करने की क्षमता के साथ लचीले रिएक्ट एप्लिकेशन बना सकते हैं। React Router React Router