Introduction: Routing with React

Overview

So far, our “Q&A” app only contains one page, so the time has come to add more pages to the app. In “Understanding the ASP.NET React Template”, we learned that pages in a Single Page Application (SPA) are constructed in the browser without any request for the HTML to the server.

React Router is a great library that helps us to implement client-side pages and the navigation between them. So, we are going to bring it into our project in this chapter.

In this phase, we will declaratively define the routes that are available in our app. We learn how to provide feedback to users when they navigate to paths that don’t exist. We’ll implement a page that displays the details of a question, along with its answers. This is where we will learn how to implement route parameters. We’ll begin by implementing the question search feature, where we will learn how to handle query parameters. We will also start to implement the page for asking a question and optimize this so that its JavaScript is loaded on demand rather than when the app loads.