URL-muotoilu ja Routing reagointi- Käyttöopas React Router

React-sovelluksessa URL-muotoilulla ja routing on ratkaiseva rooli sivuilla liikkumisessa ja vastaavan sisällön näyttämisessä. Voimme hallita routing Reactissa kirjaston avulla. Tässä on perusopas URL-osoitteiden muotoiluun ja käsittelyyn React-sovelluksessa. React Router React Router routing

 

Asentaa React Router

Avaa projektihakemistosi terminaalissa ja suorita seuraava komento asentaaksesi: React Router npm install react-router-dom

Tuo tarvittavat komponentit React-komponenttiin. React Router

 

Määritä reitit

Käytä komponenttia React-sovelluksen käärimiseen ja URL-perusmuodon määrittämiseen. <BrowserRouter>

Käytä <Route> komponenttia reittien määrittämiseen sovelluksessasi.

Esimerkki:

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

 

Määrittele Link s

Käytä komponenttia navigoinnin luomiseen sovellukseesi. <Link> link

Esimerkki:

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

 

Pääsypolun parametrit

Käytä <Route> komponenttia, jonka attribuutti path on muodossa /users/:id, päästäksesi polkuparametreihin.

<Route> Voit käyttää useParams() polkuparametrien arvoja käyttämällä määrittämääsi komponenttia .

Esimerkki:

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

 

Käytä Switch ja Redirect

Käytä komponenttia vain ensimmäisen polkua vastaavan reitin hahmontamiseen. <Switch>

Käytä komponenttia käyttäjille määritetystä polusta toiseen. <Redirect> redirect

Esimerkki:

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

 

Nämä ovat joitain peruskäsitteitä URL-muotoilusta ja routing Reactissa käyttämällä. Hyödyntämällä voit luoda joustavia React-sovelluksia, joilla on mahdollisuus navigoida ja näyttää erilaista sisältöä URL-osoitteen perusteella. React Router React Router