I denne delen skal vi ta fatt på et praktisk prosjekt der vi bygger en bedriftsnettside ved hjelp av React Router. Dette prosjektet gir deg praktisk erfaring med å implementere ruter i en React-applikasjon. Nettsiden vil bestå av tre sider: "Home", "About" og "Contacts". Hver side får sin egen URL, og vi skal se nærmere på hvordan vi setter opp ruter for disse.

Før vi går inn i detaljene, la oss få en oversikt over prosjektet:

• Prosjektmål: Målet er å lage en enkel bedriftsnettside med tre separate sider ved bruk av React Router for navigasjon;
• Sidestruktur: Nettsiden vil ha følgende sider:
  • "Home" med stien: /;
  • "About" med stien: /about;
  • "Contacts" med stien: /contacts.
• React-komponenter: Alle React-komponenter og stiler for dette prosjektet er forhåndsdefinerte, slik at vi kan fokusere utelukkende på funksjonaliteten som tilbys av React Router;
• Code Sandbox: Du får tilgang til en Code Sandbox som inneholder hele app-koden. Vi anbefaler at du undersøker koden nøye for å forstå de sentrale konseptene innen routing.

Illustrasjonen nedenfor viser den endelige funksjonaliteten til applikasjonen.

Her er startkoden i form av Code Sandbox:

Hvordan bruke Code Sandbox