I det här avsnittet påbörjar vi en praktisk resa för att bygga en företagswebbplats med hjälp av React Router. Detta projekt ger dig praktisk erfarenhet av att implementera routing i en React-applikation. Webbplatsen kommer att bestå av tre sidor: "Home", "About" och "Contacts". Varje sida kommer att ha sin egen URL, och vi kommer att undersöka hur man konfigurerar rutter för dem.

Innan vi går in på detaljerna, låt oss få en översikt av projektet:

• Projektmål: Skapa en enkel företagswebbplats med tre separata sidor med hjälp av React Router för navigering;
• Sidstruktur: Webbplatsen kommer att ha följande sidor:
  • "Home" med sökvägen: /;
  • "About" med sökvägen: /about;
  • "Contacts" med sökvägen: /contacts.
• React-komponenter: Alla React-komponenter och stilar för detta projekt är fördefinierade, vilket gör att vi kan fokusera enbart på funktionaliteten som tillhandahålls av React Router;
• Code Sandbox: Du kommer att ha tillgång till en Code Sandbox som innehåller hela appens kod. Vi rekommenderar att du noggrant granskar koden för att förstå kärnkoncepten inom routing.

Illustrationen nedan visar applikationens slutgiltiga funktionalitet.

Här är startkoden i form av Code Sandbox:

Hur man arbetar med Code Sandbox