How to Build a Multi-Page Quiz App in React Using Context API and React Router

Project Architecture

Our application consists of four main parts:

1. main.jsx: Wraps the app in BrowserRouter to enable URL routing.
2. App.jsx: Holds the global state (name and score) inside a Context Provider and defines the routes.
3. User.jsx: Captures the player's name and navigates to the quiz.
4. Quiz.jsx: Displays questions from a JSON file, tracks selected answers, and updates the score.
5. Result.jsx: Displays the player's final score and allows them to restart the game.

Building a quiz application is one of the best ways to practice core React concepts. When users enter their name on a welcome screen, answer questions on a second screen, and view their final score on a third screen, your app needs two essential features: client-side routing and global state management.
In this guide, we will walk through how to build a complete, three-page React quiz app using react-router-dom and React's built-in createContext hook—and cover common pitfalls to avoid along the way.