How to create a private route in React (Route Guard) - example: for authenticated users only

Hello there!
It always happen when you're building a react app and configuring your routes, you find out that you don't want your routes to be all public all the time. Perhaps you want to make some routes accessible only for authenticated/authorized users, or make them available at a condition that makes sense to your business logic.

I have some good news for you, you don't need some fancy third-party library to achieve that, or even be an expert in routing techniques in single-page-applications.
I will demonstrate a simple solution that you can easily configure into your application logic.

Prerequisites:

• A working React application with your routes configured and ready to use.
• A good cup of coffee (only if you're a coffee fan).

Problem

I have my routes here all setup and working fine.

<Route  path="/page/home"  component={Home}  exact  />
<Route  path="/page/news"  component={News}  exact  />
<Route  path="/page/login"  component={Login}  exact  />
<Route  path="/page/profile"  component={Profile}  exact  />
<Redirect  from="/"  to="/page/home"  exact  />

The only problem with these routes is that any one can access the URL /page/profile and I only want that route to be available when the user is authenticated, otherwise I want him to be redirected to the login page /page/login first.

Solution

I will create a simple jsx or tsx component (works for React JS or Typescript) that wraps around the Route component from the react-router-dom library. It will check for my given condition first, if that's true, it will render that component like it's supposed to do, otherwise it will redirect me to the login page.

Now let's take a look at my component:

import  React from  "react";
import { Route, Redirect } from  "react-router-dom";

const  PrivateRoute: React.FC<{
        component: React.FC;
        path: string;
        exact: boolean;
    }> = (props) => {

    const condition = performValidationHere();

    return  condition ? (<Route  path={props.path}  exact={props.exact} component={props.component} />) : 
        (<Redirect  to="/page/login"  />);
};
export  default  PrivateRoute;

Code walk-through

The functional component expects three(3) props:

• The component to render in case of a valid condition Profile Page for example
• The path to that component /page/profile for example
• Any additional parameters like the exact attribute

Final Result

<Route  path="/page/home"  component={Home}  exact  />
<Route  path="/page/news"  component={News}  exact  />
<Route  path="/page/login"  component={Login}  exact  />
<PrivateRoute  path="/page/profile"  component={Profile}  exact  />
<Redirect  from="/"  to="/page/home"  exact  />

That's it! you've done it, you now have your routes protected.