Protected Routes

Routing with the condition on a frontend application is a big plus because it helps with a better user experience. For example, if we are not logged in to X (previously known as Twitter) and want to check a profile or comment, we will be redirected to the login page. These are protected pages or actions, so we must log in before accessing these resources. In this lesson, we’ll write a ProtectedRoute component using React-Router components.

Creating a protected route wrapper

To create a protected route wrapper, we follow the steps below.

Step 1

Create a new directory in the src directory called routes.

Step 2

Inside the newly created directory, create a file called ProtectedRoute.jsx.

Step 3

Once the file is created, import the needed libraries: