Vite项目Fast Refresh报错：仅导出路由仍提示非组件导出

报错根源：React Fast Refresh对应的ESLint规则react-refresh/only-export-components要求文件只能导出React组件，而你导出的authRoutes是路由配置对象，不符合规则校验逻辑。

以下是几种更简洁的解决办法：

方案1：单文件临时禁用ESLint规则 #

在当前路由文件顶部添加注释，直接跳过该规则检查，操作最简单：

/* eslint-disable react-refresh/only-export-components */
import { lazy, Suspense } from "react";

import { ICustomRoute } from "../types";
import Loader from '../loader'

const LoginPage = lazy(() => import("../pages/auth/login"));
const LoginSuccessPage = lazy(() => import("../pages/auth/login/success"));

export const authRoutes: ICustomRoute[] = [
  {
    path: "/login",
    element: (
      <Suspense fallback={<Loader />}>
        <LoginPage />
      </Suspense>
    ),
    children: [
      {
        path: "welcome",
        element: (
          <Suspense fallback={<Loader />}>
            <LoginSuccessPage />
          </Suspense>
        ),
      },
    ],
  },
];

方案2：全局配置ESLint，批量忽略路由文件 #

如果项目存在多个路由配置文件，可在ESLint配置文件（如.eslintrc.js）中添加规则例外，让所有路由文件自动跳过该校验：

module.exports = {
  // 其他ESLint配置...
  overrides: [
    {
      files: ["**/*routes.ts", "**/*routes.tsx"], // 匹配所有路由命名的文件
      rules: {
        "react-refresh/only-export-components": "off"
      }
    }
  ]
}

方案3：封装路由内的组件（适合有复用需求的场景） #

若不想禁用规则，可把路由中element对应的内容封装成独立React组件，让文件同时导出组件和路由配置：

import { lazy, Suspense } from "react";
import { ICustomRoute } from "../types";
import Loader from '../loader'

const LoginPage = lazy(() => import("../pages/auth/login"));
const LoginSuccessPage = lazy(() => import("../pages/auth/login/success"));

// 封装带Suspense的组件
export const LoginWithSuspense = () => (
  <Suspense fallback={<Loader />}>
    <LoginPage />
  </Suspense>
);

export const LoginSuccessWithSuspense = () => (
  <Suspense fallback={<Loader />}>
    <LoginSuccessPage />
  </Suspense>
);

// 路由配置引用封装后的组件
export const authRoutes: ICustomRoute[] = [
  {
    path: "/login",
    element: <LoginWithSuspense />,
    children: [
      {
        path: "welcome",
        element: <LoginSuccessWithSuspense />,
      },
    ],
  },
];

其中方案1和2是最直接高效的，无需额外拆分文件；方案3适合需要复用这些带Suspense的组件的场景。

内容的提问来源于stack exchange，提问作者Abaga