Routing in React

Did you think of how do you navigate from one page to another in a Single-Page application?
Let's find the answer to this question in the next video.

As you learned in the last video, Routing is the process that helps in loading partial content, making it a dire need for building SPAs. Based on the URL that a user visits, specific content is loaded on the page, which helps in displaying different content to the users without any need for the page refresh. This is when the users get to see the entire application in the form of a single page though it consists of multiple pages.

In order to implement Routing in your application, you’ll be using a node package called ‘react-router-dom’. This package provides React components to simulate server-side router handling. This package provides a BrowserRouter component, which you’ll be using in your application.

Let’s move on to the next video to install ‘react-router-dom’ and implement Routing in the  Phone Directory application.

To install 'react-router-dom' package inside your application, you can go to your application's root folder and type the following command inside Command Prompt (Windows) or Terminal  (macOS):

npm install react-router-dom

Let’s play some more with Routing in the next video.

After making routes for the Add Subscriber page and the home page, there is one last thing in the application that is left incomplete. Let’s have a look at it in the next video.

Alright, that was quite easy and enjoyable. You have made your application an SPA.

You can commit your code with “Added routing for Add Subscriber page and Show Subscribers page” as the commit message and view the code diff here.

Additional Resources:

• Routing: ReactJS Official Documentation

• Blog post on Routing