Implementing Links

In this section, we are going to use the Link component from React Router to declaratively perform navigation when clicking the app name in the app header. Then, we’ll move on to programmatically performing navigation when clicking the “Ask a question” button to go to the ask page.

Using the Link component

At the moment, when we click on “Q and A” in the top-left corner of the app, it is doing an HTTP request that returns the whole React app, which, in turn, renders the home page. We are going to change this by making use of React Router’s Link component so that navigation happens in the browser without an HTTP request. We are also going to make use of the Link component for the link to the sign-in page as well. We’ll learn how to achieve this by performing the following steps:

1. In Header.tsx, import the Link component from React Router. Place the following line under the existing import statements: