I dette afsnit påbegynder vi en praktisk opgave med at opbygge en virksomheds hjemmeside ved hjælp af React Router. Dette projekt giver dig praktisk erfaring med at implementere routing i en React-applikation. Hjemmesiden vil bestå af tre sider: "Home", "About" og "Contacts". Hver side får sin egen URL, og vi undersøger, hvordan man opsætter ruter til dem.

Før vi dykker ned i detaljerne, får vi et overblik over projektet:

• Projektmål: Målet er at oprette en simpel virksomheds hjemmeside med tre separate sider ved hjælp af React Router til navigation;
• Sidestruktur: Hjemmesiden vil indeholde følgende sider:
  • "Home" med stien: /;
  • "About" med stien: /about;
  • "Contacts" med stien: /contacts.
• React-komponenter: Alle React-komponenter og -stilarter til dette projekt er foruddefinerede, så vi kan fokusere udelukkende på funktionaliteten leveret af React Router;
• Code Sandbox: Du får adgang til en Code Sandbox, der indeholder hele app-koden. Det anbefales at gennemgå koden grundigt for at forstå de centrale routing-koncepter.

Illustrationen nedenfor viser den endelige funktionalitet af applikationen.

Her er startkoden i form af Code Sandbox:

Sådan arbejder du med Code Sandbox