Private Routes and Restricted Routes

Learn more about public, private, and restricted routes and implement them in a React application.

There are three main types of routes that we’ll encounter in most react-router applications:

  1. Public
  2. Private
  3. Restricted

We’ll review these routes in greater detail throughout this lesson.

What is a public route?

The public routes can be accessed by anyone, whether or not they’re logged. The home pages of most websites are public routes.

In the following application, the Home page is the public route.

What is a private route?

Private routes are only accessible to authenticated users. Common private routes include profile pages and user settings pages. In our application, a profile page should be private so that unauthenticated users can’t access it.

We’ve created a file called PrivateRoute.js in the components folder. Let’s run the coding widget in the exercise section. Open the PrivateRoute.js file, add the following code, and import it into the App.js file.

Get hands-on with 1200+ tech skills courses.