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 களை வரையறுக்கவும்

உங்கள் பயன்பாட்டில் வழிசெலுத்தலை உருவாக்க கூறுகளைப் பயன்படுத்தவும். <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