Web apps are a significant departure from the static web pages you started with as a fledgling web developer. You reminisce about the innocent days of pure HTML and CSS. But then you remember how painful it was to dynamically generate and update elements. And how you had to duplicate a bunch of HTML to get a consistent header across all the pages of your site. Wait. Your early projects had pages. A visitor could directly access an individual page of your site directly through its URL:
https://example.com/dogs.htmlhttps://example.com/cats.htmlhttps://example.com/naked-mole-rats.htmlThe web apps that you've been building with React don't have pages. All content is tucked inside a single, top-level App component. This model of having one interface to house all content is called a single-page application (SPA).
What if you wanted your web app to have multiple pages that could be reached via different URLs? One solution is to use a package like React Router, which allows you to dynamically switch between content based on the path or route that has been typed after the domain in the browser's location bar. All the content still falls under the same single-page application model with App at the root, but the user feels like there are multiple pages. The user moves between pages by clicking on links.
You decide to test out this idea of having multiple "pages" of content in a quizzing app that you name QuizBuzz.