URL ਫਾਰਮੈਟਿੰਗ ਅਤੇ Routing ਪ੍ਰਤੀਕਿਰਿਆ ਵਿੱਚ- ਵਰਤਣ ਲਈ ਇੱਕ ਗਾਈਡ React Router

ਇੱਕ ਪ੍ਰਤੀਕਿਰਿਆ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ, URL ਫਾਰਮੈਟਿੰਗ ਅਤੇ routing ਪੰਨਿਆਂ ਨੂੰ ਨੈਵੀਗੇਟ ਕਰਨ ਅਤੇ ਸੰਬੰਧਿਤ ਸਮਗਰੀ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਵਿੱਚ ਇੱਕ ਮਹੱਤਵਪੂਰਣ ਭੂਮਿਕਾ ਨਿਭਾਉਂਦੀ ਹੈ। React ਵਿੱਚ ਪ੍ਰਬੰਧਨ ਕਰਨ ਲਈ routing, ਅਸੀਂ ਲਾਇਬ੍ਰੇਰੀ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹਾਂ। ਤੁਹਾਡੀ ਰੀਐਕਟ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ URL ਨੂੰ ਫਾਰਮੈਟ ਕਰਨ ਅਤੇ ਹੈਂਡਲ ਕਰਨ ਦੇ ਤਰੀਕੇ ਬਾਰੇ ਇੱਥੇ ਇੱਕ ਬੁਨਿਆਦੀ ਗਾਈਡ ਹੈ । React Router React Router routing

 

ਇੰਸਟਾਲ ਕਰੋ React Router

ਟਰਮੀਨਲ ਵਿੱਚ ਆਪਣੀ ਪ੍ਰੋਜੈਕਟ ਡਾਇਰੈਕਟਰੀ ਖੋਲ੍ਹੋ ਅਤੇ ਇੰਸਟਾਲ ਕਰਨ ਲਈ ਹੇਠ ਦਿੱਤੀ ਕਮਾਂਡ ਚਲਾਓ: React Router npm install react-router-dom

ਆਪਣੇ React ਕੰਪੋਨੈਂਟ ਤੋਂ ਲੋੜੀਂਦੇ ਹਿੱਸੇ ਆਯਾਤ ਕਰੋ । 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