Skip to main content

Protected Routes

In a React application, a protected route is a route, which authenticated users can only access. Protected routes ensure that only authorized users can access certain application parts.

Steps to create protected routes in React using DhiWise​

1. Go to Pages​

Example banner

2. Select Protected routes from the left menu​

Example banner

3. Select routes to protect & click Move to protected​

Example banner

4. Define the local-storage key or use the existing & click Submit​

Example banner

About the generated code of Protected routes using DhiWise​

To create a protected route in React, you can use the <Route> component from the react-router-dom library and wrap it in a higher-order component (HOC) that checks if the user is authenticated before rendering the route.

Here's an example of how DhiWise generates a protected route in React:

import React from "react";
import { Navigate, useLocation } from "react-router-dom";

export const ProtectedRoute = ({ element: Element }) => {
  const { pathname } = useLocation();
  const token = localStorage.getItem("token");

  if (!token && ["/dashboard"].includes(pathname)) {
    return <Navigate to="/" />;
  }
  return <Element />;
};

In this example, the ProtectedRoute component is a HOC that wraps the <Element> component and checks if the user is authenticated using the local storage key name “token”. If the user is authenticated, it renders the Element passed as a prop to the ProtectedRoute component. If the user is not authenticated, it redirects them to the “/” (default) page.

To use the ProtectedRoute component, DhiWise passes it as an element prop from the <Route> component in Routes.js file:

<Route path="/dashboard" element={<ProtectedRoute element={Dashboard} />} />

This will ensure that authenticated users can only access the /profile route.



Got a question? Ask here.