React Protected Routes

Question

i have a protected routes page and app.jsx page this is the code

protectedroutes.jsx

import React, { useEffect } from "react";
import { Route,useNavigate,Routes } from "react-router-dom";

const ProtectedRoute = ({ auth, component: Element, ...rest }) => {
    const navigate = useNavigate();
    useEffect(() => {
        if (!auth) {
          navigate("/*", { replace: true });
        }
      }, [auth, navigate]);
  return (
    // <Routes>
    //     <Route
    //   {...rest}
    //   element={<Element />}
    // //   render={(props) => {
    //     // if (auth){
    //     //     return <Element {...props} />;
    //     // } 
    //     // else{
    //     //     navigate("/*", { replace: true })
    //     //     return null;
    //     // }
    // //   }}
    // />
    // {/* {!auth && navigate("/*", { replace: true })} */}
    // </Routes>
      <Route {...rest} element={<Element />} />
  );

};

export default ProtectedRoute;

app.jsx

import { Route, Routes, BrowserRouter,Navigate } from "react-router-dom";
import Home from "./pages/Home.jsx";
import Sidebar from "./components/sidebar/sidebar.jsx";
import Dashboard from "./pages/dashboard/dashboard.jsx";
import HolidayList from "./pages/holiday-list/holiday-list.jsx";
import LeaveApplication from "./pages/leave-application/leave-application.jsx";
import LeaveExtension from "./pages/leave-extension/leave-extension.jsx";
import LogOut from "./pages/logout/logout.jsx";
import VofoxCalendar from "./pages/vofox-calendar/vofox-calendar.jsx";
import UserProfile from "./pages/user-profile/user-profile.jsx";
import ChangePassword from "./pages/change-password/change-password.jsx";
import LeaveCalendar from "./pages/leave-calendar/leave-calendar.jsx";
import LeaveCalendarComponent from "./pages/leave-calendar-application/leave-calendar-application.jsx";
import LeaveDisplayCalendar from "./pages/leave-display-calendar/leave-display-calendar.jsx";
import { useState } from "react";
import ForgotPassword from "./pages/forgot-password/forgot-password.jsx";
import Login from "./pages/login/login.jsx";
import ProtectedRoute from "./protectedroute.jsx";

export default function App() {
  const isAuth = localStorage.getItem("token") != null;
  console.log(isAuth);
  return (
    // <Routes>
    //   {/* <Route path="/" element={<Home />} /> */}
    //   <Route path="/" element={<Sidebar />} />
    // </Routes>

    <div className="flex min-h-full">
      <BrowserRouter>
      <Routes>
          <Route path="/*"/>
          <Route
            path="/dashboard/*"
            element={<ProtectedRoute auth={isAuth} component={Dashboard} />}
          />
          <Route path="/forgot-password" element={<ForgotPassword />} />
          <Route path="/leave-application" element={<LeaveApplication />} />
          <Route path="/change-password" element={<ChangePassword />} />
          <Route path="/user-profile" element={<UserProfile />} />
          <Route path="/leave-extension" element={<LeaveExtension />} />
          <Route path="/holiday-list" element={<HolidayList />} />
          <Route path="/vofox-calendar" element={<VofoxCalendar />} />
          <Route path="/logout" element={<LogOut />} />
          <Route path="/leave-calendar" element={<LeaveCalendar />} />
          <Route
            path="/leave-display-calendar"
            element={<LeaveDisplayCalendar />}
          />
          <Route
            path="/leave-calendar-application"
            element={<LeaveCalendarComponent />}
          />
          <Route path="/" element={<Login />} />
        </Routes>

        {/* <Routes>
          <Route element={<ProtectedRoute />}>
            <Route path="/dashboard/*" element={<Dashboard />} auth={isAuth} />
          </Route>

          <Route path="/*" element={<Login />} />
          <Route path="/forgot-password" element={<ForgotPassword />} />
          <Route path="/leave-application" element={<LeaveApplication />} />
          <Route path="/change-password" element={<ChangePassword />} />
          <Route path="/user-profile" element={<UserProfile />} />
          <Route path="/leave-extension" element={<LeaveExtension />} />
          <Route path="/holiday-list" element={<HolidayList />} />
          <Route path="/vofox-calendar" element={<VofoxCalendar />} />
          <Route path="/logout" element={<LogOut />} />
          <Route path="/dashboard" element={<Dashboard />} />
          <Route path="/dashboard" element={<ProtectedRoute auth={isAuth}><Dashboard/></ProtectedRoute>}></Route>
          <Route path="/leave-calendar" element={<LeaveCalendar />} />
          <Route
            path="/leave-display-calendar"
            element={<LeaveDisplayCalendar />}
          />
          <Route
            path="/leave-calendar-application"
            element={<LeaveCalendarComponent />}
          />
        </Routes> */}
      </BrowserRouter>
    </div>
  );
}

when i try to login to the dashboard i am getting an error message enter image description here how can i fix this i tried different ways and still the error is not getting fixed

my router dom version is "react-router-dom": "^6.10.0",

You can't do private routes likes that in react-router-dom 6.x — Konrad, Apr 14 '23 at 10:56

score -2 · Answer 1 · answered Apr 14 '23 at 12:08

You can't pass a <Route /> as an element prop in react router. Instead do something like this:

// protectedroutes.jsx
import React from "react";
import { Route, useNavigate, matchPath } from "react-router-dom";

const ProtectedRoute = ({ auth, path, ...rest }) => {
    const navigate = useNavigate();
    const match = useMatch(path);

    if (match && !auth) {
        navigate("/");
    }

    return (
        <Route path={path} {...rest} />
    );

};

export default ProtectedRoute;

Usage:

// App.jsx
...
<ProtectedRoute
    path="/dashboard/*"
    element={<Dashboard />}
/>
...

You (1) ***should not*** call `navigate` as an unintentional side-effect like this, and (2) still ***can't*** directly render the `Route` component, it is the same issue OP has. — Drew Reese, Apr 14 '23 at 15:07

React Protected Routes

1 Answers1