URL-formatering och Routing i React- En guide till användning React Router

I en React-applikation spelar URL-formatering och routing en avgörande roll för att navigera på sidor och visa motsvarande innehåll. För att hantera routing i React kan vi använda biblioteket. Här är en grundläggande guide om hur du använder för att formatera webbadresser och hantera i din React-applikation. React Router React Router routing

 

Installera React Router

Öppna din projektkatalog i terminalen och kör följande kommando för att installera: React Router npm install react-router-dom

Importera de nödvändiga komponenterna från till din React-komponent. React Router

 

Definiera rutter

Använd komponenten för att slå in din React-applikation och ställ in ett basformat för URL. <BrowserRouter>

Använd <Route> komponenten för att definiera rutter i din applikation.

Exempel:

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

 

Definiera Link s

Använd komponenten för att skapa navigering i din applikation. <Link> link

Exempel:

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

 

Åtkomstvägsparametrar

Använd <Route> komponenten med ett path attribut i formatet /users/:id för att komma åt sökvägsparametrar.

Inom den komponent som definieras av <Route>, kan du använda useParams() för att komma åt värdena för sökvägsparametrar.

Exempel:

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

 

Använd Switch och Redirect

Använd komponenten för att bara rendera den första rutten som matchar sökvägen. <Switch>

Använd komponenten för användare från en angiven sökväg till en annan. <Redirect> redirect

Exempel:

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

 

Det här är några grundläggande begrepp för URL-formatering och routing i React med. Genom att använda kan du skapa flexibla React-applikationer med möjligheten att navigera och visa olika innehåll baserat på URL:en. React Router React Router