close

URL-opmaak en Routing in React- Een handleiding voor gebruik React Router

In een React-applicatie spelen URL-opmaak en routing een cruciale rol bij het navigeren door pagina's en het weergeven van bijbehorende inhoud. Om routing in React te beheren, kunnen we de bibliotheek gebruiken. Hier is een basisgids over hoe u URL's kunt opmaken en verwerken in uw React-toepassing. React Router React Router routing

 

Installeren React Router

Open uw projectmap in de terminal en voer de volgende opdracht uit om te installeren: React Router npm install react-router-dom

Importeer de benodigde componenten van in uw React-component. React Router

 

Definieer routes

Gebruik de component om uw React-toepassing in te pakken en een basis-URL-indeling in te stellen. <BrowserRouter>

Gebruik de <Route> component om routes in uw toepassing te definiëren.

Voorbeeld:

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

 

Definieer Link s

Gebruik de component om navigatieprogramma 's in uw toepassing te maken. <Link> link

Voorbeeld:

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

 

Toegang tot padparameters

Gebruik de <Route> component met een path attribuut in de indeling /users/:id om toegang te krijgen tot padparameters.

Binnen de component gedefinieerd door de <Route>, kunt u gebruiken useParams() om toegang te krijgen tot de waarden van padparameters.

Voorbeeld:

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

 

Gebruik Switch en Redirect

Gebruik de component om alleen de eerste route weer te geven die overeenkomt met het pad. <Switch>

Gebruik de component om gebruikers van het ene opgegeven pad naar het andere te leiden. <Redirect> redirect

Voorbeeld:

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

 

Dit zijn enkele basisconcepten van URL-opmaak en routing in React met behulp van. Door gebruik te maken van, kunt u flexibele React-applicaties maken met de mogelijkheid om te navigeren en verschillende inhoud weer te geven op basis van de URL. React Router React Router