React-roure V6 两种写法报错问题

316 阅读1分钟

产生问题背景

准备搭建一个react+egg的前后端分离的项目,用后端访问前端资源。在使用react-route v6时,不想直接在页面上使用 <Route path='xxx' element={<xxx />} />,因此打算封装一个,先写好对应的路由数据,遍历创建。但是在使用路由的懒加载时,页面会报错。不使用就不会报错。

1.路由懒加载数据格式(未解决)

    const HomeRouter: IRoute[] = [
  {
    path: "/",
    element:lazy(() => import('../../home'))
  },
];

报错信息:

// 1. GET http://localhost:7001/static/js/src_login_index_tsx.chunk.js net::ERR_ABORTED 404 (Not Found)
// 2. Refused to execute script from 'http://localhost:7001/static/js/src_login_index_tsx.chunk.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
//  3. Uncaught ChunkLoadError: Loading chunk src_login_index_tsx failed.

通过报错推断是我引入资源问题,因为在7001的端口下没有这些资源

image.png 2. 没有问题的写法

const HomeRouter: IRoute[] = [
  {
    path: "/",
    element: <Home />,
  },
];