URL formázása és Routing reakcióban – Útmutató a használathoz React Router

A React alkalmazásban az URL formázása routing kulcsfontosságú szerepet játszik az oldalak navigálásában és a megfelelő tartalom megjelenítésében. A React kezeléséhez routing használhatjuk a könyvtárat. Itt található egy alapvető útmutató az URL-ek formázásához és kezeléséhez a React alkalmazásban. React Router React Router routing

 

Telepítés React Router

Nyissa meg projektkönyvtárát a terminálban, és futtassa a következő parancsot a telepítéshez: React Router npm install react-router-dom

Importálja a szükséges összetevőket a React összetevőjébe. React Router

 

Útvonalak meghatározása

Az összetevő segítségével csomagolja be a React alkalmazást, és állítson be egy alap URL-formátumot. <BrowserRouter>

Használja az <Route> összetevőt az útvonalak meghatározásához az alkalmazásban.

Példa:

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

 

Határozza meg Link s

Használja az összetevőt navigáció létrehozásához az alkalmazásban. <Link> link

Példa:

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

 

Hozzáférési útvonal paraméterei

Az elérési út paramétereinek eléréséhez használja a formátumú attribútumot <Route> tartalmazó összetevőt. path /users/:id

Az által meghatározott komponensen belül az elérési út paramétereinek értékeit <Route> érheti el. useParams()

Példa:

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

 

Használja Switch és Redirect

A komponens használatával csak az első útvonalat jelenítse meg, amely megfelel az útvonalnak. <Switch>

Használja az összetevőt az egyik megadott útvonaltól a másikig tartó felhasználókhoz. <Redirect> redirect

Példa:

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

 

Íme néhány alapfogalom az URL-formázásról és routing a React használatával kapcsolatban. A használatával rugalmas React alkalmazásokat hozhat létre, amelyek képesek navigálni és különféle tartalmakat megjeleníteni az URL alapján. React Router React Router