Summary  
This chapter shows how to configure client-side routing by adding a new route and updating navigation links while integrating a corresponding view component to render dynamic data.

General domain of usage  
Single-page web application navigation

Låt oss ta en paus för att granska de senaste ändringarna i vår app:
- **Ny rutt**: Vi har lagt till en `/products`-rutt i `App.jsx` för att skapa sidan "Products", vilket utökar appens funktionalitet;
- **Förbättrad navigering**: Navigeringen i `Bar.jsx` inkluderar nu en länk till sidan "Products", vilket gör det enklare för användare att komma åt denna nya vy;
- **`ProductsPage`-komponent**: Kärnan i vår "Products"-sida är `ProductsPage`-komponenten. Den renderar och hanterar produktdata och erbjuder en interaktiv upplevelse.

Utforska hela appen i den tillhandahållna Code Sandbox för att se dessa uppdateringar i praktiken.

Lär dig hantera navigation i React-applikationer med hjälp av React Router. Förstå strukturen av URL:er och routningens roll i webbapplikationer. Konfigurera React Router för att skapa flersidiga applikationer med dynamiskt innehåll baserat på URL-sökvägar. Arbeta med avancerade funktioner som query-strängar och URL-parametrar för att hantera applikationstillstånd och användarnavigation.

Lär dig de teoretiska grunderna för begrepp som URL, domän, protokoll, frågeparametrar och mer. Förstå betydelsen av routing i webbapplikationer och varför vi behöver React Router-biblioteket.

Lär dig hur du skapar en komplett React-applikation från grunden, med möjlighet att visa innehåll som anpassas baserat på URL med hjälp av React Router-funktionalitet.

Utforska användning av frågesträngar för att dela och hantera applikationstillstånd via URL:er, arbeta med olika datatyper i frågeparametrar och utnyttja React Router för navigering och effekter baserade på URL-förändringar.

Inspektera Senaste Ändringar