Client-side Routing in React Router

In this lesson, we will look at an important component of single-page applications (SPA) - client-side routing. Such routing allows us to update the URL in the browser without additional document requests from the server.

Run the application we created in the previous lesson. Open the developer panel and in it the tab 'Network' (Network for Chrome). After each click on our links, we see a request for document. That is, each time we ask the server to load document for us.

Now let's take advantage of React Router to get rid of such requests. To do this, open up root.jsx of our app and replace the a markup tag with the Link component. First, let's add its import:

Now let's replace the a tags with the href attribute. Instead of the code snippet:

We will now have the following code:

We open the 'Network' tab on the developer panel again, set the root path in the address bar and refresh the page. Now we click on the links and see that document was requested only once during the initial loading and there is no request to the server during subsequent clicks.