Routes en Context

Maak een React applicatie die bestaat uit minstens 4 componenten. Geef de applicatie de naam "routes-en-context".

Routing

Voorzie een hoofdmenu met navigatiebalk met als inhoud “Home”, “About”, “Games”, “Contact”. Bouw react routing in zodat bij het navigeren naar één van deze opties de inhoud van de gekozen pagina verschijnt en de juiste url gebruikt wordt.

Op de inhoud van de verschillende pagina’s toon je een tijdelijke inhoud (lorem ipsum). Maak wel duidelijk welke pagina wordt getoond.

Op de games pagina geef je de keuze uit 4 games (kies zelf welke). Kies zelf op welke manier je de keuze laat maken (drop down, button per game, ...).

Bij het kiezen van een game, moet je ervoor zorgen dat de gebruiker surft naar een pagina met de naam van de game in de url.

Context

Voor het gebruik van de app, willen we een onderscheid maken tussen het soort gebruikers: beginners en experts. Heel veel toekomstige instellingen willen we in alle pagina’s van de applicatie laten afhangen van deze instelling. Maak daarom gebruik van de Context api om deze instelling te kunnen instellen. Overal in de applicatie moet de gebruiker kunnen switchen tussen beginner en expert.

Voorzie 2 verschillende backgrounds, die door alle pagina’s gebruikt wordt en die wordt aangepast bij de keuze beginner en expert. Rechts bovenaan moet een aanduiding staan of de applicatie in beginners of in experts mode actief is.