vscode elslint报错：Fast refresh only works when a file only exports components

vscode elslint报错：Fast refresh only works when a file only exports components

1、报错复现

2、报错原因

Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components. 表明 Fast Refresh 功能要求文件中只能导出 React 组件。如果你的文件中还导出了其他内容（如常量、函数、类型等），Fast Refresh 可能会失效。
从上面的代码中可以看出Router是React的组件，但是又导出routerArray和rootRouter了两个类型，从而导致Fast Refresh失效

const Router = () => {
  const routes = useRoutes(rootRouter);
  return routes;
};
export default Router;

3、解决方案

1、上面报错截图中Use a new file to share constants or functions between components.eslint(react-refresh/only-export-components) 是有eslint的规则引起的，所以只要在根本目录下的eslint.config.js的文件中禁用Fast Refresh，不同版本的eslint配置文件可能不一样

export default tseslint.config(
  ...,
  rules: {
    "react-refresh/only-export-components": "off",
  }
)

2、上面说到Fast Refresh 功能要求文件中只能导出 React 组件，但是又导出routerArray和rootRouter，所以只要将原来的代码拆开即可。
route-utils.tsx文件

import { Navigate } from "react-router-dom";
import { CustomRouteObject } from "@/routers/interface";
import Login from "@/views/login/index";

// * 导入所有router
const metaRouters: any = import.meta.glob("./modules/*.tsx", { eager: true }); 
// * 处理路由
export const routerArray: CustomRouteObject[] = [];
Object.keys(metaRouters).forEach((item: any) => {
  Object.keys(metaRouters[item]).forEach((key: any) => {
    routerArray.push(...metaRouters[item][key]);
  });
});

export const rootRouter: CustomRouteObject[] = [
  {
    path: "/",
    element: <Navigate to="/login" />,
  },
  {
    path: "/login",
    element: <Login />,
    meta: {
      requiresAuth: false,
      title: "登录页",
      key: "login",
    },
  },
  ...routerArray,
  {
    path: "*",
    element: <Navigate to="/404" />,
  },
];

index.tsx文件

import { useRoutes } from "react-router-dom";
import { rootRouter } from "./route-utils";

const Router = () => {
  const routes = useRoutes(rootRouter);
  return routes;
};

export default Router;

4、总结

不推荐方案一禁用Fast Refresh来规避eslint代码规范从而降低开发效率，建议采用方案二将React组件的的export和其他的export拆开