created multiple routes pages and not able to implement authentication

Question

const DashboardRoute = () => {
  return (
    <div style={{ display: 'flex' }}>
      <SideBar />
      <div>
        {/* <HeaderSearchBar /> */}
        <Routes>
          <Route exact path="/home" element={<Business />}></Route>
          <Route exact path="/home/renewals" element={<Renewals />}></Route>
          <Route exact path="/usermanagement" element={<UserManagement />}></Route>
          <Route exact path="/usermanagement/edit" element={<UserEdit />}></Route>
          <Route exact path="/datamanagement" element={<DataManagement />}></Route>
        </Routes>
      </div>
    </div>
  );
};

const AllRoutes = () => {
  return (
    <Routes>
      <Route exact path="/" element={<Main />}></Route>
      <Route path="/motor/*" element={<MotorRoutes />} />
      <Route path="/Dashboard/*" element={<DashboardRoute />} />
      <Route path="/customer/*" element={<CustomerDashboard />} />
      <Route
        path="/Dashboard/datamanagement/*"
        element={<DashboardDataManagementRoutes />}
      />
      <Route path="/details/*" element={<DetailsRoutes />} />
      <Route path="/pos/*" element={<PosPage />} />
      <Route path="/RaiseClaims/*" element={<RaiseClaims/>}/>
    </Routes>
  );
};

export default AllRoutes;

import { Navigate, Route } from "react-router-dom";
import { useEffect, useState } from "react";
import { GetDataLocalStorage, carReqObj } from "../Components/GlobalObj";

const ProtectedRoute = (props) => {
  const [req, setReq] = useState({});
  //   let navigate = useNavigate()

  useEffect(() => {
    let obj = GetDataLocalStorage("globalObj");
    if (obj && Object.keys(obj).length > 0) {
      setReq(obj);
    } else {
      setReq(carReqObj);
    }
  }, []);

  console.log("protected route", req);
  let newObj = { ...req };

  if (newObj?.user?.login === "Logout" && newObj?.user?.usertype === "") {
    return <Navigate path="/" replace={true} />;
  }
  return <Route {...props} />;
};

export default ProtectedRoute;

My previous employee has created routes like these and I was tasked to write authentication to given routes. All types of errors are being shown.

I tried various ways of implementing authentication but couldn't do it. I tried wrapping ProtectedRoute protectedRoute instead of route and we didn't use outlet anywhere.

created multiple routes pages and not able to implement authentication

0 Answers0