I en React-applikation spelar URL-formatering och routing en avgörande roll för att navigera på sidor och visa motsvarande innehåll. För att hantera routing i React kan vi använda biblioteket. Här är en grundläggande guide om hur du använder för att formatera webbadresser och hantera i din React-applikation. React Router React Router routing
Installera React Router
Öppna din projektkatalog i terminalen och kör följande kommando för att installera: React Router npm install react-router-dom
Importera de nödvändiga komponenterna från till din React-komponent. React Router
Definiera rutter
Använd komponenten för att slå in din React-applikation och ställ in ett basformat för URL. <BrowserRouter>
Använd <Route>
komponenten för att definiera rutter i din applikation.
Exempel:
Definiera Link s
Använd komponenten för att skapa navigering i din applikation. <Link>
link
Exempel:
Åtkomstvägsparametrar
Använd <Route>
komponenten med ett path
attribut i formatet /users/:id
för att komma åt sökvägsparametrar.
Inom den komponent som definieras av <Route>
, kan du använda useParams()
för att komma åt värdena för sökvägsparametrar.
Exempel:
Använd Switch och Redirect
Använd komponenten för att bara rendera den första rutten som matchar sökvägen. <Switch>
Använd komponenten för användare från en angiven sökväg till en annan. <Redirect>
redirect
Exempel:
Det här är några grundläggande begrepp för URL-formatering och routing i React med. Genom att använda kan du skapa flexibla React-applikationer med möjligheten att navigera och visa olika innehåll baserat på URL:en. React Router React Router