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:
Määrittele Link s
Käytä komponenttia navigoinnin luomiseen sovellukseesi. <Link>
link
Esimerkki:
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:
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:
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