Oblikovanje URL-jev in Routing v Reactu – vodnik za uporabo React Router

V aplikaciji React routing imajo oblikovanje URL-jev in ključno vlogo pri krmarjenju po straneh in prikazovanju ustrezne vsebine. Za upravljanje routing v Reactu lahko uporabimo knjižnico. Tukaj je osnovni vodnik o tem, kako uporabiti za oblikovanje URL-jev in obdelavo v vaši aplikaciji React. React Router React Router routing

 

Namestite React Router

Odprite imenik projekta v terminalu in zaženite naslednji ukaz za namestitev: React Router npm install react-router-dom

Uvozite potrebne komponente iz v svojo komponento React. React Router

 

Določite poti

Uporabite komponento, da zavijete svojo aplikacijo React in nastavite osnovni format URL-ja. <BrowserRouter>

Uporabite <Route> komponento za definiranje poti v svoji aplikaciji.

primer:

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

 

Opredelite Link s

Uporabite komponento za ustvarjanje navigacijskih s v vaši aplikaciji. <Link> link

primer:

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 dostopne poti

Za dostop do parametrov poti uporabite <Route> komponento z path atributom v formatu /users/:id.

Znotraj komponente, ki jo definira <Route>, lahko uporabite useParams() za dostop do vrednosti parametrov poti.

primer:

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

 

Uporabite Switch in Redirect

Uporabite komponento samo za upodobitev prve poti, ki se ujema s potjo. <Switch>

Uporabite komponento za uporabnike z ene določene poti na drugo. <Redirect> redirect

primer:

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

 

To je nekaj osnovnih konceptov oblikovanja URL-jev in routing v Reactu z uporabo. Z uporabo lahko ustvarite prilagodljive aplikacije React z možnostjo krmarjenja in prikaza različnih vsebin na podlagi URL-ja. React Router React Router