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

I en React-applikasjon spiller URL-formatering og routing en avgjørende rolle i å navigere på sider og vise tilsvarende innhold. For å administrere routing i React kan vi bruke biblioteket. Her er en grunnleggende veiledning for hvordan du bruker til å formatere URL-er og håndtere i React-applikasjonen din. React Router React Router routing

 

Installere React Router

Åpne prosjektkatalogen i terminalen og kjør følgende kommando for å installere: React Router npm install react-router-dom

Importer de nødvendige komponentene fra inn i React-komponenten din. React Router

 

Definer ruter

Bruk komponenten til å pakke inn React-applikasjonen din og angi et grunnleggende URL-format. <BrowserRouter>

Bruk <Route> komponenten til å definere ruter i applikasjonen din.

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

Bruk komponenten til å lage navigasjonsfunksjoner i applikasjonen din. <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>  
 );  
}  

 

Tilgang til baneparametere

Bruk <Route> komponenten med et path attributt i formatet /users/:id for å få tilgang til baneparametere.

Innenfor komponenten definert av <Route>, kan du bruke useParams() for å få tilgang til verdiene til baneparametere.

Eksempel:

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

 

Bruk Switch og Redirect

Bruk komponenten til kun å gjengi den første ruten som samsvarer med banen. <Switch>

Bruk komponenten til brukere fra en spesifisert bane til en annen. <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 noen grunnleggende konsepter for URL-formatering og routing i React ved hjelp av. Ved å bruke kan du lage fleksible React-applikasjoner med muligheten til å navigere og vise forskjellig innhold basert på URL-en. React Router React Router