React data router语言 - show fallback for loader

Question

我使用react-router v6.4与createBrowserRouter来支持新的数据API。

我有一个有loader的路由，这个加载器从服务器获取数据需要1-2秒，我想在那个时候显示一个加载动画。

请看下面这个简单的例子，我有一个注释，指出我希望在文档中做什么/找到什么:

const router = createBrowserRouter([
{
path: '/',
element: <Layout/>,
children: [
{
index: true,
element: <Screen title="Home"/>,
},
{
path: 'materials',
loader: async () => {
return (await fetch('/api/materials')).json()
},
fallbackElement: <Loading />, // <<--- THIS IS WHAT I WAS EXPECTING TO DO
element: <Materials/>,
},
{
path: 'projects',
loader: async () => {
return (await fetch('/api/projects')).json()
},
element: <Projects/>,
},
],
},
])

无法找到如何放置"回退";元素在路由上显示，而加载器正在等待数据，只放置fallbackElement上的RouterProvider组件，但这不是我想要的(它显示回退元素仅在RouterProvider的挂载上，而不是在路由之间改变时)。

似乎有点奇怪，这样的事情是不支持的，并不能真正找到答案，通过搜索这里也。

Answer 1

延迟数据可以实现你想要的。

1. 返回defer({ expensiveData: promise })在加载器
2. 在组件中使用const data = useLoaderData()获取数据
3. 使用下面的代码

<Suspense fallback={<Loading />}>
<Await resolve={data.expensiveData}>
{(expensiveData) => what you want to render}
</Await>
</Suspense>

Answer 2

根据文档，在使用加载器数据的组件上，你必须使用React。悬疑和Await组件显示回退，如下所示:

import { Await, useLoaderData } from "react-router-dom";
function Book() {
const { book, reviews } = useLoaderData();
return (
<div>
<h1>{book.title}</h1>
<p>{book.description}</p>
<React.Suspense fallback={<ReviewsSkeleton />}>
<Await
resolve={reviews}
errorElement={
<div>Could not load reviews 😬</div>
}
children={(resolvedReviews) => (
<Reviews items={resolvedReviews} />
)}
/>
</React.Suspense>
</div>
);
}

https://reactrouter.com/en/main/components/await等待

这是理论上的，因为我已经这样做了，我的加载器也没有显示。