In deze sectie starten we een praktische reis om een bedrijfswebsite te bouwen met React Router. Dit project biedt praktijkervaring met het implementeren van routing binnen een React-applicatie. De website zal bestaan uit drie pagina's: "Home", "About" en "Contacts". Elke pagina krijgt een eigen URL, en we onderzoeken hoe routes hiervoor opgezet kunnen worden.

Voordat we in de details duiken, volgt hier een overzicht van het project:

• Projectdoel: Het opzetten van een eenvoudige bedrijfswebsite met drie afzonderlijke pagina's, waarbij React Router wordt gebruikt voor navigatie;
• Pagina-indeling: De website bevat de volgende pagina's:
  • "Home" met het pad: /;
  • "About" met het pad: /about;
  • "Contacts" met het pad: /contacts.
• React-componenten: Alle React-componenten en stijlen voor dit project zijn vooraf gedefinieerd, zodat de focus volledig ligt op de functionaliteit van React Router;
• Code Sandbox: Er is toegang tot een Code Sandbox met de volledige app-code. Het wordt aanbevolen de code zorgvuldig te bestuderen om de kernconcepten van routing te begrijpen.

De onderstaande illustratie toont de uiteindelijke functionaliteit van de applicatie.

Hier is de initiële code in de vorm van de Code Sandbox:

Werken met Code Sandbox