L-ifformattjar tal-URL u Routing f'React- Gwida għall-Użu React Router

F'applikazzjoni React, l-ifformattjar tal-URL u routing għandhom rwol kruċjali fin-navigazzjoni tal-paġni u l-wiri tal-kontenut korrispondenti. Biex timmaniġġja routing f'React, nistgħu nużaw il- librerija. Hawnhekk hawn gwida bażika dwar kif tuża biex tifformattja l-URLs u timmaniġġja fl-applikazzjoni React tiegħek. React Router React Router routing

 

Installa React Router

Iftaħ id-direttorju tal-proġett tiegħek fit-terminal u mexxi l-kmand li ġej biex tinstalla: React Router npm install react-router-dom

Importa l-komponenti meħtieġa minn ġol-komponent React tiegħek. React Router

 

Iddefinixxi Rotot

Uża l- komponent biex tgeżwer l-applikazzjoni React tiegħek u ssettja format URL bażi. <BrowserRouter>

Uża l- <Route> komponent biex tiddefinixxi r-rotot fl-applikazzjoni tiegħek.

Eżempju:

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

 

Iddefinixxi Link s

Uża l- komponent biex toħloq navigazzjoni s fl-applikazzjoni tiegħek. <Link> link

Eżempju:

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

 

Parametri tal-Path ta' Aċċess

Uża l- <Route> komponent b'attribut path fil-format /users/:id biex taċċessa l-parametri tal-mogħdija.

Fi ħdan il-komponent definit mill- <Route>, tista' tuża useParams() biex taċċessa l-valuri tal-parametri tal-passaġġ.

Eżempju:

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

 

Uża Switch u Redirect

Uża l- komponent biex tirrendi biss l-ewwel rotta li taqbel mal-mogħdija. <Switch>

Uża l- komponent lill -utenti minn mogħdija speċifikata għal oħra. <Redirect> redirect

Eżempju:

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

 

Dawn huma xi kunċetti bażiċi tal-ifformattjar tal-URL u routing f'React bl-użu. Billi tuża, tista 'toħloq applikazzjonijiet ta' React flessibbli bil-kapaċità li tinnaviga u turi diversi kontenut ibbażat fuq il-URL. React Router React Router