close

URL स्वरूपन आणि Routing प्रतिक्रिया मध्ये- वापरण्यासाठी मार्गदर्शक React Router

प्रतिक्रिया अनुप्रयोगामध्ये, URL स्वरूपन आणि routing पृष्ठे नेव्हिगेट करण्यात आणि संबंधित सामग्री प्रदर्शित करण्यात महत्त्वपूर्ण भूमिका बजावते. React मध्ये व्यवस्थापित करण्यासाठी 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 एस ची व्याख्या करा

तुमच्या ऍप्लिकेशनमध्ये नेव्हिगेशन तयार करण्यासाठी घटक वापरा. <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