close

یو آر ایل فارمیٹنگ اور Routing ری ایکٹ میں- استعمال کرنے کے لیے ایک گائیڈ React Router

ری ایکٹ ایپلی کیشن میں، یو آر ایل فارمیٹنگ اور routing صفحات کو نیویگیٹ کرنے اور متعلقہ مواد کی نمائش میں اہم کردار ادا کرتا ہے۔ React میں انتظام کرنے کے لیے routing ، ہم لائبریری کا استعمال کر سکتے ہیں۔ یو آر ایل کو فارمیٹ کرنے اور اپنی React ایپلیکیشن میں ہینڈل کرنے کے طریقہ کے بارے میں یہاں ایک بنیادی گائیڈ ہے ۔ React Router React Router routing

 

انسٹال کریں۔ React Router

ٹرمینل میں اپنی پروجیکٹ ڈائرکٹری کھولیں اور انسٹال کرنے کے لیے درج ذیل کمانڈ کو چلائیں: React Router npm install react-router-dom

اپنے React جزو میں سے ضروری اجزاء درآمد کریں ۔ React Router

 

راستوں کی وضاحت کریں۔

اپنی React ایپلیکیشن کو لپیٹنے کے لیے جزو کا استعمال کریں اور ایک بنیادی 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 React میں استعمال کرتے ہوئے ۔ استعمال کر کے ، آپ URL کی بنیاد پر مختلف مواد کو نیویگیٹ اور ڈسپلے کرنے کی صلاحیت کے ساتھ لچکدار React ایپلی کیشنز بنا سکتے ہیں۔ React Router React Router