错误：快速刷新仅在文件仅导出组件时有效

Question

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>
        ),
      },
    ],
  },
];

我只从此文件中导出一件事（authRoutes），但我在 Vite 应用程序中收到此错误

Fast refresh only works when a file only exports components. Move your component(s) to a separate file.eslint(react-refresh/only-export-components) 

我将惰性导入移动到“imports.ts”文件中并从那里导出，然后将它们导入到路由文件中，一切正常。我感觉这个问题有点绕。有没有更好的方法来消除错误？

Answer 1

我刚刚遇到了相同的错误，但用途有点不同，但我还有一个 Utilities.tsx 文件，我在其中抽象了函数，当我尝试同时进行函数导出和组件导出时，发生了错误。

export const sum = (a,b) => {
return a + b
}
export const Component = () => {
return <p>Hello World</p>
}

这会导致错误，因为它同时导出函数和组件。您必须有一个单独的文件来导出可重用或抽象的组件，以便快速刷新发挥作用。