Formátování URL a Routing v Reactu- Průvodce používáním React Router

V aplikaci React routing hraje formátování URL a URL klíčovou roli při procházení stránek a zobrazování odpovídajícího obsahu. Ke správě routing v Reactu můžeme použít knihovnu. Zde je základní průvodce, jak používat formátování URL a manipulaci ve vaší aplikaci React. React Router React Router routing

 

Nainstalujte React Router

Otevřete adresář projektu v terminálu a spusťte následující příkaz pro instalaci: React Router npm install react-router-dom

Importujte potřebné komponenty do vaší komponenty React. React Router

 

Definujte trasy

Použijte komponentu k zabalení vaší aplikace React a nastavení základního formátu URL. <BrowserRouter>

Použijte <Route> komponentu k definování tras ve vaší aplikaci.

Příklad:

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

 

Definujte Link s

Použijte komponentu k vytvoření navigace ve vaší aplikaci. <Link> link

Příklad:

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

 

Parametry přístupové cesty

Pro přístup k parametrům cesty použijte <Route> komponentu s path atributem ve formátu. /users/:id

V rámci komponenty definované pomocí <Route>, můžete použít useParams() pro přístup k hodnotám parametrů cesty.

Příklad:

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

 

Použijte Switch a Redirect

Komponentu použijte k vykreslení pouze první trasy, která odpovídá cestě. <Switch>

Použijte komponentu uživatelům z jedné zadané cesty do druhé. <Redirect> redirect

Příklad:

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

 

Toto jsou některé základní koncepty formátování URL a routing v React using. Pomocí, můžete vytvářet flexibilní aplikace React se schopností procházet a zobrazovat různý obsah na základě adresy URL. React Router React Router