How can i get the meta data of the current page. (React)

[AlejandroAmayaIzquierdo]

Vite

import path from "path";
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import pagesPlugin from "vite-plugin-pages";

const NO_AUTH_ROUTES = ["login", "signup", "cita"];

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    pagesPlugin({
      dirs: [{ dir: "src/routes", baseRoute: "" }],
      exclude: ["**/components/*.tsx"],
      extendRoute(route) {
        if (NO_AUTH_ROUTES.includes(route.path)) {
          console.log(route.path);
          return route;
        }
        return {
          ...route,
          meta: { auth: true },
        };
      },
    }),
  ],
  resolve: {
    alias: {
      "@": path.resolve(import.meta.dirname, "./src"),
    },
  },
});

I set up some routes without authorization for any user to access

App.tsx

import { Suspense, useEffect } from "react";
import { useLocation } from "react-router-dom";
import { useNavigate, useRoutes } from "react-router";
import { Toaster } from "@/components/ui/sonner";
import { findRoute } from "./lib/Path";
import { isUserAuthenticated } from "./lib/user";

import routes from "~react-pages";

const App = () => {
  const location = useLocation();
  const navigate = useNavigate();

  const handleLoadRoute = async () => {
    const currentPath = location.pathname;

    const currentRoute = findRoute(routes, currentPath);

    if (!currentRoute) return;

    const payload = currentRoute?.meta;

    if (payload && payload.auth) {
      const resp = await isUserAuthenticated();
      if (!resp) navigate("/login");
      else if (resp && location.pathname !== "/") navigate("/");
    }
  };
  useEffect(() => {
    handleLoadRoute();
  }, [location.pathname]);

  return (
    <Suspense fallback={<p>Loading...</p>}>
      <div className="relative flex min-h-screen flex-col bg-background">
        {useRoutes(routes)}
        <Toaster richColors />
      </div>
    </Suspense>
  );
};

export default App;

findRoute Function

import { RouteObject } from "react-router";

type RoutePayload = { meta: { auth: boolean } } & RouteObject;

export const findRoute = (
  routes: RouteObject[],
  path: string
): RoutePayload | null => {
  for (const route of routes) {
    if (route.path === path.substring(1, path.length)) {
      return route as RoutePayload;
    }
    if (route.children) {
      const childRoute = findRoute(route.children, path);
      if (childRoute) {
        return childRoute;
      }
    }
  }
  return null;
};

I made up a function fo find it using the react-pages array and the location.pathname of react router. The function does the job with some basic routes like '/users' , '/login'. But do not work in a route with a parameter like '/user/:id'.

How should I approach this?
Is isn't an official way to get the object with the plugin or with react route?