Formatarea URL-ului și Routing în React- Un ghid de utilizare React Router

Într-o aplicație React, formatarea URL și routing joacă un rol crucial în navigarea în pagini și afișarea conținutului corespunzător. Pentru a gestiona routing în React, putem folosi biblioteca. Iată un ghid de bază despre cum să formatați adresele URL și să le gestionați în aplicația dvs. React. React Router React Router routing

 

Instalare React Router

Deschideți directorul de proiect în terminal și rulați următoarea comandă pentru a instala: React Router npm install react-router-dom

Importați componentele necesare din componenta dvs. React. React Router

 

Definiți rutele

Utilizați componenta pentru a încheia aplicația dvs. React și pentru a seta un format URL de bază. <BrowserRouter>

Utilizați <Route> componenta pentru a defini rute în aplicația dvs.

Exemplu:

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

 

Definiți Link s

Utilizați componenta pentru a crea navigații în aplicația dvs. <Link> link

Exemplu:

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

 

Parametrii căii de acces

Utilizați <Route> componenta cu un path atribut în format /users/:id pentru a accesa parametrii căii.

În cadrul componentei definite de <Route>, puteți utiliza useParams() pentru a accesa valorile parametrilor de cale.

Exemplu:

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

 

Utilizați Switch și Redirect

Utilizați componenta pentru a reda numai primul traseu care se potrivește cu calea. <Switch>

Utilizați componenta pentru utilizatori de la o cale specificată la alta. <Redirect> redirect

Exemplu:

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

 

Acestea sunt câteva concepte de bază despre formatarea URL-ului și routing în React folosind. Folosind, puteți crea aplicații React flexibile cu capacitatea de a naviga și de a afișa conținut variat pe baza adresei URL. React Router React Router