React Router for Firebase

Background

Since we are building a full-fledged application in this course, it is good practice to have separate pages (e.g. landing page, account page, admin page, sign-up page, sign-in page) to divide the application into multiple URLs (e.g. /landing, /account, /admin). These URLs or subpaths of a domain are called routes in a client-side web application.

Let’s implement routing in our application using React Router before we dive into incorporating Firebase for a real-time database, authentication, and authorization. Don’t worry if you haven’t used React Router before; the concepts are quite basic and you should be able to understand and follow the instructions throughout this course.

The application should ideally have multiple routes. For instance, the user should be able to visit the public landing page, and also be able to use the sign-up and sign-in pages to enter the application as an authenticated user. If a user is authenticated, only then will he be allowed to visit protected pages such as the account page or admin page, where the latter will only be accessible to authenticated users with an admin role.

You can centralize all the routes of your application in a well-defined src/constants/routes.js file.