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

前言

我通过 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)。这里简单的记录下问题的修复方式。

复现方式

先定义一组路由并导出

javascript 复制代码
// 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 /> },
]
export default router

main.jsx中使用简洁的 URL <BrowserRouter> 将当前位置存储在浏览器地址栏中,并使用浏览器内置的历史堆栈进行导航。

javascript 复制代码
// src/main.jsx
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import { BrowserRouter } from "react-router-dom"

ReactDOM.createRoot(document.getElementById('root')).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
)

App.jsx 使用钩子函数 useRoutes 的返回一个有效的 React 元素来呈现路由树。

javascript 复制代码
// src/App.jsx
import { useRoutes } from "react-router-dom"
import routes from './router/index'

function App() {
  return (
    <>
      <div className="page">
        { useRoutes(routes) }
      </div>
    </>
  )
}
export default App

但是在 router/index.jsx 中一直会提示如下错误:

解决措施

这里有两种解决方案:

  • 为所有文件的此规则添加禁用注释。这实际上不会打破快速刷新。

  • 导出呈现路由器提供程序的组件,而不是导出路由器。

在不修改原有配置的基础上我们推荐使用第二种方式进行修改,而且也是副作用最小的方式。

1、在 router\index.jsx 文件中使用 createBrowserRouter 这个 React Router Web 项目推荐使用的路由并使用 RouterProvider 导出路由。修改代码如下:

javascript 复制代码
import { lazy } from "react"
import { Navigate, createBrowserRouter, RouterProvider } from "react-router-dom"

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

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

const router = createBrowserRouter(routes)

const Routes = () => {
  return <RouterProvider router={router} />
}
export default Routes

2、在 main.jsx 中直接渲染 App 组件即可

javascript 复制代码
import ReactDOM from 'react-dom/client'
import App from './App.jsx'

ReactDOM.createRoot(document.getElementById('root')).render(<App />)

3、在 App.jsx 中直接使用 router\index.jsx 中导出的函数式组件,修改代码如下:

javascript 复制代码
import Routes from "./router";

function App() {
  return (
    <>
      <div className="page">
        <Routes></Routes>
      </div>
    </>
  )
}
export default App

参考链接:Lazy Loading react component get some warning

相关推荐
我要洋人死4 分钟前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人16 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人16 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR21 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香23 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969326 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai32 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_91540 分钟前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
小牛itbull3 小时前
ReactPress:重塑内容管理的未来
react.js·github·reactpress