修复vite中使用react提示Fast refresh only works when a file only exports components.

原创

已于 2024-04-17 09:35:06 修改 · 3.8k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端 #前端框架 #vite

于 2024-04-17 09:30:51 首次发布

前言

我通过 vite 构建了一个 react 应用并使用 react.lazy 来懒加载组件，但是在使用过程中一直提示 Fast refresh only works when a file only exports components. Move your component(s) to a separate file.eslint(react-refresh/only-export-components)。这里简单的记录下问题的修复方式。

复现方式

先定义一组路由并导出

// src/router/index.jsx
import {
   
    lazy } from "react"
import {
   
    Navigate } from "react-router-dom"

const Home = lazy(() => import("../views/home"))

const routes = [
  {
   
    path: "/", element: <Navigate to="/home" /> },
  {
   
    path: "/home", element: <Home /