URL formatavimas ir Routing „React“ – naudojimo vadovas React Router

„React“ programoje URL formatavimas routing atlieka lemiamą vaidmenį naršant puslapiuose ir rodant atitinkamą turinį. Norėdami valdyti routing „React“, galime naudoti biblioteką. Čia pateikiamas pagrindinis vadovas, kaip formatuoti URL ir tvarkyti „React“ programoje. React Router React Router routing

 

Diegti React Router

Atidarykite savo projekto katalogą terminale ir paleiskite šią komandą, kad įdiegtumėte: React Router npm install react-router-dom

Importuokite reikiamus komponentus iš savo „React“ komponento. React Router

 

Apibrėžkite maršrutus

Naudokite komponentą, kad apvyniotumėte React programą ir nustatytumėte pagrindinį URL formatą. <BrowserRouter>

Naudokite <Route> komponentą maršrutams savo programoje apibrėžti.

Pavyzdys:

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

 

Apibrėžkite Link s

Naudokite komponentą, kad sukurtumėte naršymą programoje. <Link> link

Pavyzdys:

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

 

Prieigos kelio parametrai

Norėdami pasiekti kelio parametrus, naudokite <Route> komponentą su path atributu formatu. /users/:id

Komponente, kurį apibrėžia <Route>, galite naudoti useParams() norėdami pasiekti kelio parametrų reikšmes.

Pavyzdys:

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

 

Naudokite Switch ir Redirect

Naudokite komponentą, kad pateiktumėte tik pirmąjį maršrutą, kuris atitinka kelią. <Switch>

Naudokite komponentą vartotojams iš vieno nurodyto kelio į kitą. <Redirect> redirect

Pavyzdys:

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

 

Tai yra keletas pagrindinių URL formatavimo ir routing „React“ naudojant. Naudodami, galite sukurti lanksčias „React“ programas su galimybe naršyti ir rodyti įvairų turinį pagal URL. React Router React Router