close

URL ढाँचा र Routing प्रतिक्रिया मा- प्रयोग गर्न गाइड React Router

प्रतिक्रिया अनुप्रयोगमा, URL ढाँचा र routing पृष्ठहरू नेभिगेट गर्न र सम्बन्धित सामग्री प्रदर्शन गर्न महत्त्वपूर्ण भूमिका खेल्छ। routing प्रतिक्रियामा व्यवस्थापन गर्न, हामी पुस्तकालय प्रयोग गर्न सक्छौं। यहाँ URL हरू ढाँचामा प्रयोग गर्ने र तपाईंको प्रतिक्रिया अनुप्रयोगमा ह्यान्डल गर्ने बारे आधारभूत गाइड छ । React Router React Router routing

 

स्थापना गर्नुहोस् React Router

टर्मिनलमा आफ्नो प्रोजेक्ट डाइरेक्टरी खोल्नुहोस् र स्थापना गर्न निम्न आदेश चलाउनुहोस्: React Router npm install react-router-dom

तपाईंको प्रतिक्रिया कम्पोनेन्टमा आवश्यक कम्पोनेन्टहरू आयात गर्नुहोस् । React Router

 

मार्गहरू परिभाषित गर्नुहोस्

आफ्नो प्रतिक्रिया एप्लिकेसन र्‍याप गर्न र आधार URL ढाँचा सेट गर्न कम्पोनेन्ट प्रयोग गर्नुहोस् । <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 s परिभाषित गर्नुहोस्

तपाईंको अनुप्रयोगमा नेभिगेसनहरू सिर्जना गर्न कम्पोनेन्ट प्रयोग गर्नुहोस् । <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>  
 );  
}

 

यी URL ढाँचाका केही आधारभूत अवधारणाहरू हुन् र routing प्रतिक्रियामा प्रयोग गरेर । प्रयोग गरेर, तपाईंले URL मा आधारित विभिन्न सामग्री नेभिगेट र प्रदर्शन गर्ने क्षमताको साथ लचिलो प्रतिक्रिया अनुप्रयोगहरू सिर्जना गर्न सक्नुहुन्छ। React Router React Router