为什么不推迟进口？

Question

hook.js:608 SyntaxError: 请求的模块 '/node_modules/.vite/deps/react-router-dom.js?v=b741cdde' 不提供名为 'defer' 的导出

import {
  Await,
  defer,
  useLoaderData,
  Link
} from "react-router-dom";

控制台出现错误，如何解决？

尝试从“react-router-dom”导入 defer；

Answer 1

问题

defer

已在 React-Router v7 中删除。

使用React-Router v7

具体参见删除的API：

删除的API

React Router v7 中删除了以下 API：

• json

• defer

• unstable_composeUploadHandlers

• unstable_createMemoryUploadHandler

• unstable_parseMultipartFormData

在重大更改（

react-router

）下我看到这一点：

• 删除原来的

  defer

  实现，转而通过单次获取使用原始 Promise 和

  turbo-stream

  (#11744)

看起来好像没有任何东西被取代

defer

，但他们只是简化了 API。如果您希望“推迟”加载的数据，那么只需从加载器返回 Promise，而不是

await

-ing 它们。

详情请参阅悬念直播。

1. 返回加载程序的承诺

   React Router 在渲染路由组件之前等待路由加载器。要解锁非关键数据的加载程序，请返回 承诺而不是在加载器中等待它。

2. 渲染后备和已解决的 UI

   承诺将在

   loaderData

   上可用，

   <Await>

   将等待承诺并触发

   <Suspense>

   呈现后备 UI。

注意

安装较新的主要版本的依赖项时，查看变更日志以使自己了解任何重大更改非常重要。

或者回滚到 React-Router v6

您还可以安装仍包含 defer 的先前版本。

1. 卸载 React-Router 7：

   npm uninstall -S react-router

2. 安装 React-Router 6：

   npm install -S [email protected]

   （或未来任何日期的最新 v6 版本）