Formatiranje URL-a i Routing u Reactu- Vodič za korištenje React Router

U React aplikaciji, formatiranje URL-a i routing igraju ključnu ulogu u kretanju stranicama i prikazivanju odgovarajućeg sadržaja. Za upravljanje routing u Reactu možemo koristiti knjižnicu. Ovdje je osnovni vodič o tome kako koristiti za formatiranje URL-ova i rukovanje u vašoj React aplikaciji. React Router React Router routing

 

Instalirati React Router

Otvorite svoj direktorij projekta u terminalu i pokrenite sljedeću naredbu za instalaciju: React Router npm install react-router-dom

Uvezite potrebne komponente iz u svoju React komponentu. React Router

 

Definirajte rute

Upotrijebite komponentu da omotate svoju React aplikaciju i postavite osnovni format URL-a. <BrowserRouter>

Koristite <Route> komponentu za definiranje ruta u svojoj aplikaciji.

Primjer:

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

 

Definirajte Link s

Koristite komponentu za stvaranje navigacije u vašoj aplikaciji. <Link> link

Primjer:

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 pristupnog puta

Koristite <Route> komponentu s path atributom u formatu /users/:id za pristup parametrima staze.

Unutar komponente definirane pomoću <Route>, možete koristiti useParams() za pristup vrijednostima parametara staze.

Primjer:

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

 

Koristite Switch i Redirect

Koristite komponentu za prikaz samo prve rute koja odgovara stazi. <Switch>

Koristite komponentu za korisnike s jednog navedenog puta na drugi. <Redirect> redirect

Primjer:

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

 

Ovo su neki osnovni koncepti oblikovanja URL-a i routing korištenja Reacta. Korištenjem možete izraditi fleksibilne React aplikacije s mogućnošću navigacije i prikaza različitih sadržaja na temelju URL-a. React Router React Router