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:
Definer Link s
Bruk komponenten til å lage navigasjonsfunksjoner i applikasjonen din. <Link>
link
Eksempel:
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:
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:
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