Tengo esto en react import MainContent from "@/components/layout/MainContent";
import { useNavigationStore } from "@/store/NavigationStore";
import { Suspense, useEffect } from "react";
import { Routes, Route, Navigate } from "react-router-dom";
import { PATH, ComponentsMap } from "./path";
import ProtectedRoutes from "./ProtectedRoute";
import Loader from "@/components/Loader/Loader";
import { Menu } from "@/interfaces/models/menu.interface";
import { useGetMenus } from "@/rquery/queries/menu";

const IndexRoutes = () => {
  const { nav_list, setNavList } = useNavigationStore();

  const token = localStorage.getItem("token") ?? "";

  const { data, isLoading: menuLoading } = useGetMenus({
    options: {
      enabled: !!token,
    },
  });

  useEffect(() => {
    if (!menuLoading && data) {
      setNavList(data.data ?? []);
    }
  }, [data, menuLoading, setNavList]);

  // if (menuLoading || isLoading) return <Loader />;

  if (menuLoading) {
    return <Loader />;
  }

  const generateRoutes = (menu: Menu[]): JSX.Element[] => {
    return menu.flatMap((item) => {
      if (item.isCategory && item.submenu.length > 0) {
        return generateRoutes(item.submenu);
      } else if (!item.isCategory && item.target) {
        const Component = ComponentsMap[item.target];
        return (
          <Route
            key={item.id}
            path={item.target}
            element={
              <Suspense fallback={<Loader />}>
                {Component ? <Component /> : <div>Page Not Found</div>}
              </Suspense>
            }
          />
        );
      }
      return [];
    });
  };

  const Login = ComponentsMap[PATH.auth.login];

  return (
    <Routes>
      <Route
        path={PATH.auth.login}
        element={
          <Suspense fallback={<Loader />}>
            <Login />
          </Suspense>
        }
      />
      <Route element={<ProtectedRoutes />}>
        <Route element={<MainContent />}>
          <Route path={"/"} element={<div>Overview</div>} />
          {nav_list.length > 0 ? generateRoutes(nav_list) : null}
        </Route>
      </Route>
      <Route path="*" element={<Navigate to={PATH.root} />} />
    </Routes>
  );
};

export default IndexRoutes;import { lazy } from "react";

const ROOT = "/";
const ROOT_AUTH = "/auth";
// const ROOT_HOME = '/';
export const PATH = {
  root: ROOT,
  auth: {
    root: ROOT_AUTH,
    login: `${ROOT_AUTH}/login`,
    register: `${ROOT_AUTH}/register`,
  },
  administracion: {
    root: "/administracion",
    perfiles: "/administracion/perfiles",
    usuarios: "/administracion/usuarios",
    menu: "/administracion/menu",
    // overview: "/administracion/overview",
    // reports: "/administracion/reports",
  },
};

export const ComponentsMap = {
  [PATH.auth.login]: lazy(() => import("@/pages/Login/LoginPage")),
  // [PATH.auth.register]: lazy(() => import("@/pages/Register/RegisterPage")),
  [PATH.administracion.perfiles]: lazy(
    () => import("@/pages/Profiles/ProfilesPage")
  ),
  [PATH.administracion.usuarios]: lazy(() => import("@/pages/Users/UsersPage")),
  [PATH.administracion.menu]: lazy(() => import("@/pages/Menu/MenuPage")),
  // [PATH.administracion.overview]: lazy(() => import("@/pages/Overview/OverviewPage")),
  // [PATH.administracion.reports]: lazy(() => import("@/pages/Reports/ReportsPage")),
};
// ProtectedRoutes.tsx
import Loader from "@/components/Loader/Loader";
import { useGetMenus } from "@/rquery/queries/menu";
import { useNavigationStore } from "@/store/NavigationStore";
import { useEffect } from "react";
import { Outlet, Navigate } from "react-router-dom";
import { PATH } from "./path";

const ProtectedRoutes = () => {
  const token = localStorage.getItem("token") ?? "";
  const { nav_list, isLoading } = useNavigationStore();

  if (isLoading) {
    return <Loader />;
  }

  if (!token || nav_list.length === 0) {
    return <Navigate to={PATH.auth.login} replace />;
  }

  return <Outlet />;
};

export default ProtectedRoutes;
 El problema que tengo es que al refrescar la pagina en cualquier ruta o al querer dirigirme a alguna ruta desde la url, estoy teniendo problemas de que siempre me dirige a la ruta raiz, supongo que esto debe ser porque no se forman las rutas al momento de entrar a la pagina y es por eso que tal vez no la encuentra. Ayudame a solucionar esto