vite-plugin-route-meta

현재 vite-plugin-route-meta 라는 이름으로 널리 알려진 공식 패키지는 확인되지 않지만, Vite 생태계에서는 **“라우트 메타(route meta)”**를 다루는 플러그인들이 파일 기반 라우팅과 함께 메타데이터를 설정/확장해주는 역할로 많이 사용됩니다.

 

vite-plugin-route-meta 계열의 목적은
RouteObject에 meta: { ... }를 “자동으로/편하게” 붙여주는 것입니다.

{
  path: '/dashboard',
  element: <Dashboard />,
  meta: {
    requiresAuth: true,
    title: '대시보드',
  },
}

 

React Router(RouteObject)는 공식적으로 meta를 해석하지 않습니다.

 

메타선언 방법

 

1) RouteObject에 직접 선언 (기본)

{
  path: '/dashboard',
  element: <Dashboard />,
  meta: {
    requiresAuth: true,
    title: '대시보드',
  },
}

 

2) 페이지 파일 옆에 선언 (플러그인 방식)

// 빌드 시 RouteObject에 병합
meta: routeMeta

// pages/dashboard.tsx
export const routeMeta = {
  requiresAuth: true,
  title: '대시보드',
};

export default function Dashboard() {
  return <div>Dashboard</div>;
}

 

* 라우팅 가드 예시

import { Navigate, Outlet, useMatches } from 'react-router';

export function AuthGuard() {
  const matches = useMatches();
  const requiresAuth = matches.some(
    m => m.route.meta?.requiresAuth
  );

  const isLoggedIn = false; // 예시

  if (requiresAuth && !isLoggedIn) {
    return <Navigate to="/login" replace />;
  }

  return <Outlet />;
}

 

다른 방법으로 loader 기반 가드 (권장되는 방식)

v6.4+ / v7에서 공식적으로 가장 깔끔한 패턴

export async function authLoader({ request }: LoaderFunctionArgs) {
  const isLoggedIn = false;

  if (!isLoggedIn) {
    throw redirect('/login');
  }

  return null;
}

{
  path: '/dashboard',
  element: <Dashboard />,
  loader: authLoader,
  meta: { requiresAuth: true },
}