Published: June 24 2022

React Router 6 - Private Route Component to Restrict Access to Protected Pages

Tutorial built with React 18.1.0 and React Router 6.3.0

This is a quick example of how to implement a private route component with React Router 6. The private route component is used to protect selected pages in a React app from unauthenticated users.

The below code snippets are from a React + Redux JWT authentication tutorial I posted recently that includes a live demo, so to see the code running check out React 18 + Redux - JWT Authentication Example & Tutorial.


React Router 6 Private Route

Path: /src/_components/PrivateRoute.jsx

The react private route component renders child components (children) if the user is logged in. If not logged in the user is redirected to the /login page with the return url passed in the location state property.

The current logged in user (authUser) is retrieved from Redux state with a call to the useSelector() hook. Redux is used in this example however it is not required to implement a Private Route component in React Router 6. You could use a different state management library or any approach you prefer to get the logged in status of the user.

import { Navigate } from 'react-router-dom';
import { useSelector } from 'react-redux';

import { history } from '_helpers';

export { PrivateRoute };

function PrivateRoute({ children }) {
    const { user: authUser } = useSelector(x => x.auth);
    if (!authUser) {
        // not logged in so redirect to login page with the return url
        return <Navigate to="/login" state={{ from: history.location }} />

    // authorized so return child components
    return children;

React App Component with Protected Route

Path: /src/App.jsx

The App component is the root component of the example app, it contains the outer html, main nav and routes for the application.

The /login route is public, and the home route (/) is protected by the private route component that uses Redux to check if the user is logged in.

The last route is a catch-all redirect route that redirects any unmatched paths to the home page.

import { Routes, Route, Navigate, useNavigate, useLocation } from 'react-router-dom';

import { history } from '_helpers';
import { Nav, PrivateRoute } from '_components';
import { Home } from 'home';
import { Login } from 'login';

export { App };

function App() {
    // init custom history object to allow navigation from 
    // anywhere in the react app (inside or outside components)
    history.navigate = useNavigate();
    history.location = useLocation();

    return (
        <div className="app-container bg-light">
            <Nav />
            <div className="container pt-4 pb-4">
                                <Home />
                    <Route path="/login" element={<Login />} />
                    <Route path="*" element={<Navigate to="/" />} />

Need Some React Help?

Search fiverr for freelance React developers.

Follow me for updates

On Twitter or RSS.

When I'm not coding...

Me and Tina are on a motorcycle adventure around Australia.
Come along for the ride!


Supported by