Formatimi i URL-së dhe Routing në React- Një udhëzues për t'u përdorur React Router

Në një aplikacion React, formatimi i URL-së dhe routing luan një rol vendimtar në lundrimin e faqeve dhe shfaqjen e përmbajtjes përkatëse. Për të menaxhuar routing në React, ne mund të përdorim bibliotekën. Këtu është një udhëzues bazë se si të përdorni për të formatuar URL-të dhe për të trajtuar në aplikacionin tuaj React. React Router React Router routing

 

Instaloni React Router

Hapni direktorinë e projektit tuaj në terminal dhe ekzekutoni komandën e mëposhtme për ta instaluar: React Router npm install react-router-dom

Importoni komponentët e nevojshëm nga në komponentin tuaj React. React Router

 

Përcaktoni rrugët

Përdorni komponentin për të mbështjellë aplikacionin tuaj React dhe për të vendosur një format bazë URL. <BrowserRouter>

Përdorni <Route> komponentin për të përcaktuar rrugët në aplikacionin tuaj.

Shembull:

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>  
 );  
}  

 

Përcaktoni Link s

Përdorni komponentin për të krijuar navigacion në aplikacionin tuaj. <Link> link

Shembull:

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>  
 );  
}  

 

Parametrat e Rrugës së Qasjes

Përdorni <Route> komponentin me një path atribut në format /users/:id për të hyrë në parametrat e rrugës.

Brenda komponentit të përcaktuar nga <Route>, ju mund të përdorni useParams() për të hyrë në vlerat e parametrave të rrugës.

Shembull:

import { useParams } from 'react-router-dom';  
  
function User() {  
  const { id } = useParams();  
  
  return <div>User ID: {id}</div>;  
}  

 

Përdorni Switch dhe Redirect

Përdorni komponentin për të dhënë vetëm rrugën e parë që përputhet me shtegun. <Switch>

Përdorni komponentin për përdoruesit nga një rrugë e caktuar në tjetrën. <Redirect> redirect

Shembull:

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>  
 );  
}  

 

Këto janë disa koncepte bazë të formatimit të URL-ve dhe routing në React duke përdorur. Duke përdorur, ju mund të krijoni aplikacione fleksibël React me aftësinë për të lundruar dhe shfaqur përmbajtje të ndryshme bazuar në URL. React Router React Router