我可以在 Remix 中为单个 URL 处理多个加载程序吗？

Question

目前我有一个包含多个部分的登录页面，它是使用 Remix.run 构建的。这些部分是同一 url 的一部分，它们在同一页面中垂直并排显示。

我的问题是页面加载持续了一段时间，因为在加载程序中完成了多个请求。每个部分需要来自服务器的不同信息，但所有部分的所有请求都在同一个加载程序中等待。

我可以为每个部分处理一个装载机吗？所以整个页面不会等待所有请求完成，但每个部分都可以等待自己的数据

我已经尝试将每个部分作为路线处理

> routes
  > my-page.tsx
  > my page
    > section-1.tsx
    > section-2.tsx

然后我尝试为每个部分添加一个加载器，并在 my-page.tsx 中调用这些部分

我的页面.tsx

const MyPage = (): React.ReactElement => (
  <main>
    <section>
      <Section1 />
    </section>
    <section>
      <Section2 />
    </section>
  </main>
)
export default MyPage;

但我得到下一个错误

TypeError: Cannot destructure property 'myData' of '(0 , import_react7.useLoaderData)(...)' as it is undefined.

似乎 Section1 组件试图从 MyPage 加载器获取数据，而不是从 Section1 加载器本身获取数据。

如果我在 MyPage 中使用 <Outlet /> 组件，如果我通过 URL 访问它们，第 1 节和第 2 节加载器就会工作

localhost:3000/my-page/section-1
localhost:3000/my-page/section-2

但我不希望这些部分是嵌套路线，我希望它们在我的页面中。

如果有人可以帮助我，我将不胜感激。谢谢！

Answer 1

在混音中，所有低于routes目录将在浏览器中作为“导航路线”/URL 提供。

我会尝试使用<Outlet /> 而不是<Section1 />。查看this remix documentation关于嵌套路由.我已经读了几遍，有时回过头来提醒自己 Remix 是如何处理嵌套路由的。

如果您希望 Section1 和 Section2 出现在用户的同一路线上，您应该从 routes 文件夹以外的其他地方导入反应组件。您的部分可能作为单独的 React Functions 导入到您的路线中会更好。

应用程序/路由/我的页面.tsx

import { Section1, Section2 } from "~/components/sections.tsx"
// ~ is a reference to the app directory. `~/routes` is also a valid path

// this function will be loaded when the requests comes in
export const loader: LoaderFunction = async ({request}) => {
   const myData = await fetch(random_api)
   return json({myData})
}
// this function will be returned to the browser
export default function MyPageRoute() {
   const myData = useLoaderData()
   return(
     <main>
       <section>
         <Section1  />
       </section>
       <section>
         <Section2 />
       </section>
     </main>
   )
}

我总是使用目录外部我的 React 组件的 routes/ 目录，我不希望它成为路由。希望这有帮助:)