URL-formatering og Routing i React- En guide til brug React Router

I en React-applikation spiller URL-formatering og routing en afgørende rolle i at navigere på sider og vise tilsvarende indhold. For at administrere routing i React kan vi bruge biblioteket. Her er en grundlæggende guide til, hvordan du bruger til at formatere URL'er og håndtere i din React-applikation. React Router React Router routing

 

Installere React Router

Åbn din projektmappe i terminalen og kør følgende kommando for at installere: React Router npm install react-router-dom

Importer de nødvendige komponenter fra din React-komponent. React Router

 

Definer ruter

Brug komponenten til at indpakke din React-applikation og indstille et basis-URL-format. <BrowserRouter>

Brug <Route> komponenten til at definere ruter i din applikation.

Eksempel:

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

 

Definer Link s

Brug komponenten til at oprette navigationer i din applikation. <Link> link

Eksempel:

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

 

Adgangsstiparametre

Brug <Route> komponenten med en path attribut i formatet /users/:id til at få adgang til stiparametre.

Inden for den komponent, der er defineret af <Route>, kan du bruge useParams() til at få adgang til værdierne af stiparametre.

Eksempel:

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

 

Brug Switch og Redirect

Brug komponenten til kun at gengive den første rute, der matcher stien. <Switch>

Brug komponenten til brugere fra en specificeret sti til en anden. <Redirect> redirect

Eksempel:

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

 

Dette er nogle grundlæggende begreber for URL-formatering og routing i React ved hjælp af. Ved at bruge, kan du oprette fleksible React-applikationer med mulighed for at navigere og vise forskelligt indhold baseret på URL'en. React Router React Router