How to create private route using React Router v6.18.0

Issue

I’d like to know how to create a private route using react router v6.18.0 if the user isn’t logged in. I’d like my route to be the one on my dashboard: /dashboard

import * as React from "react";
import * as ReactDOM from "react-dom/client";
import {
    createBrowserRouter,
    RouterProvider,
} from "react-router-dom";
import "./index.css";
import Home from "./views/Home";
import 'bootstrap/dist/css/bootstrap.min.css';
import Login from "./views/Login";
import Register from "./views/Register";

const router = createBrowserRouter([
    {
        path: "/",
        element: <Home/>
    },{
        path: "/login",
        element: <Login/>
    },{
        path: "/register",
        element: <Register/>
    },
]);

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
    <React.StrictMode>
        <RouterProvider router={router} />
    </React.StrictMode>
);

Solution

Step 1 :

Check authentication

const isAuthenticated = *Your authentication logic*;

Step 2 :

Create PrivateLogin element

const PrivateRoute = ({ path, element }) => {
  if (isAuthenticated) {
    return <Route path={path} element={element} />;
  } else {
    return <Navigate to="/dashboard" />;
  }
};

Step 3 :

Use this element in routes.

const router = createBrowserRouter([
  {
    path: "/",
    element: <Home />,
  },
  {
    path: "/login",
    element: <Login />,
  },
  {
    path: "/register",
    element: <Register />,
  },
  {
    path: "/dashboard",
    element: <PrivateRoute path="/dashboard" element={<Dashboard />} />,
  },
]);

Answered By – Amit Gandole

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0