DEV Community

Cover image for Private Routes in React
Arindam Majumder
Arindam Majumder

Posted on • Originally published at

Private Routes in React

## Introduction

In modern Web Applications, ensuring the privacy and security of certain routes is a crucial aspect. We don't want everyone to access every part of our Web App. For that, we use Private routes provided by React router v6.

In this Article, we'll understand what is Private routes and implement it on a sample app!

Sounds interesting?

So, let's START!

What is a Private and public Route?

Public routes are routes that are accessible to any user. They do not require authentication to access.

Private routes, on the other hand, are accessible only to authenticated users. They require the user to be logged in to access the route.

Project SetUp:

For this article, I'm using a starter template from Dennis Ivy. But, you can apply the same techniques to your own project.

Here's the link to the starter template

After cloning this code, Just run npm install and That's it!

You can check if it's working or not by Running the following command

npm run dev
Enter fullscreen mode Exit fullscreen mode

It will show something like this!


In this section, we'll implement the private routes in a simple React Project! We'll be using the Outlet component provided by React Router 6 for that. It's like a container that contains different parts/components of our web page.

With Outlet, we can create several smaller sections, or 'sub-routes,' all within one main route.

Now we'll create a PrivateRoutes.jsx File within the utils folder.This checks if the user is authenticated or not before rendering the protected/private routes!

Here's the code for that:

import { Outlet, Navigate } from 'react-router-dom'

const PrivateRoutes = () => {
    const user = false; // Replace with your authentication logic

    return user ? <Outlet/> : <Navigate to="/login"/>
Enter fullscreen mode Exit fullscreen mode

Here, If the user is authenticated it will render the private components using <Outlet /> component otherwise it will navigate to the /Login route!

Note: Change the const user = false; part according to your Project. For this example, I'm using a static value ie False!

Now, We'll complete the Routing setup in the App.jsx using the Private components that we have created before!

Here's the code for that :

import PrivateRoutes from './utils/PrivateRoutes'

function App() {
return (
            <Route path="/login" element={<Login/>}/>
            <Route path="/register" element={<Register/>}/>

            <Route element={<PrivateRoutes />}>
                <Route path="/" element={<Home/>}/>
                <Route path="/profile" element={<Profile/>}/>

Enter fullscreen mode Exit fullscreen mode

Here, We have wrapped the <Home /> and <Profile /> components within the private routes. The user has to log in to access the Home & the profile component.


If you found this blog post helpful, please consider sharing it with others who might benefit. You can also follow me for more content on Javascript, React, and other web development topics.

To sponsor my work, please visit: Arindam's Sponsor Page and explore the various sponsorship options.

Connect with me on Twitter, LinkedIn, Youtube and GitHub.

Thank you for Reading :)

Top comments (4)

brense profile image
Rense Bakker

Do keep in mind though that all content in the private route is still in the browser client of the user, so they can access it if they know a little bit of JavaScript. In other words, dont use to hide actually sensitive information.

matek075 profile image

Good point. Worth to notice this.

akanpatrick profile image
Akaninyene Akpan

I will give more thought to this and get to understand private routes better.

Greater work Arindam

faiq157 profile image
Faiq Ahmad

Greate work