Reactjs React.lazy不加载任何组件

我试图在React应用程序中实现一些代码拆分。在这种情况下，这并不是绝对必要的，因为它是一个相当小的应用程序，但我想在大型项目中实施之前，我会在低风险的环境中尝试这种技术

我的工作代码：

import React from 'react'
import { useUser } from './context/userContext'
import Layout from './components/layout'
import Routes from './components/routes'
import LandingScreen from './components/authApp/LandingScreen'

const App = () => {
  const user = useUser()

  return (
    <>
      {user ? (
        <Layout>
          <Routes />
        </Layout>
      ) : (
        <LandingScreen />
      )}
    </>
  )
}

export default App

我的应用程序编译良好，但浏览器中没有组件渲染，我收到以下错误：

index.js:1 The above error occurred in one of your React components:
    in Unknown (at App.js:26)
    in App (at src/index.js:14)
    in UserProvider (at appProvider.js:7)
    in AuthProvider (at appProvider.js:6)
    in AppProviders (at src/index.js:13)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/docs/error-boundaries.html to learn more about error boundaries.

如果有任何线索能说明我做错了什么，我将不胜感激。LandingScreen组件只是呈现一些div和my login组件，但即使只是呈现单个div，也会发生相同的错误

---

编辑：将延迟加载的组件包装到暂挂组件中可以修复它。文档似乎表明悬念组件是可选的，但可能不是？任何了解更多并能插话的人都将不胜感激。

A

lazy

组件应该是A的后代，如果您使用

suspence

，那么您需要提供一个

后备
：


const-App=（）=>{
const user=useUser（）
返回(
{用户(
) : (
)}
)
}

注意：您不必使用
悬念
，但如果不使用，则基本上必须使用自己的
错误边界
重新创建它，因此更容易使用它

苏塞彭斯抓住你了

如果
暂挂
下的任何组件在渲染时挂起（例如
惰性
），则整个组件树直到最近的暂挂都会在组件准备就绪时卸载和重新装载。这可能是一个巨大的陷阱

悬念到底在做什么？

React一直在讨论这样一种观点，即组件可以
抛出承诺-
抛出承诺在这里非常重要，它不能返回
承诺，它必须抛出承诺，以表明它是“异步的”。如果最近的
ErrorBoundary
（其中
suspend
是）捕捉到了
承诺
，则它将显示其
回退
属性。当它捕获的
承诺
解决时，它就变成了
孩子
——当你思考它实际上在做什么时，它变得非常简单

我说它一直在玩弄这个想法，因为尽管他们已经为
悬念
实现了它，但他们认为它是一个用于数据加载的API，事实上，人们已经证明了你现在可以这样使用它（现在找不到链接，但它非常酷）

导入路径良好，是的，它默认导出组件。感谢您对文档中措辞的反馈。我提出了一个请求，要求更改措辞，并可能展开对话：@Adam很好的反馈，谢谢。我在公共关系中加入了一条关于可能修改措辞的注释，以明确其中一条是必需的。我将推出一个新的提交，添加一些额外的措辞，以使其更清晰。我已将PR中的措辞更改为“惰性组件必须在
悬念
组件或替代组件中呈现”。如果你有更清晰的方式来描述这一点的想法，我愿意与你交谈。@JamieDixon不，我认为这是可行的。谢谢你打开PR，我想它可以帮助像我这样的一些人。你能提供一些关于悬念是什么/做什么的细节吗？谢谢，我确实弄明白了这一点（见我的编辑），但是文档表明“应该”用悬念包装，这表明悬念是可选的，不是必需的。也许只是一个需要修正的小问题。我想在渲染服务器端时不能使用悬念？它的默认反应是什么？@JoeLloyd-
index.js:1 The above error occurred in one of your React components:
    in Unknown (at App.js:26)
    in App (at src/index.js:14)
    in UserProvider (at appProvider.js:7)
    in AuthProvider (at appProvider.js:6)
    in AppProviders (at src/index.js:13)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/docs/error-boundaries.html to learn more about error boundaries.

const App = () => {
  const user = useUser()

  return (
    <Suspense fallback={<></>}>
      {user ? (
        <Layout>
          <Routes />
        </Layout>
      ) : (
        <LandingScreen />
      )}
    </Suspense>
  )
}