使用React Router GET表单时useLoaderData返回旧数据的问题

问题现象 #

• 首次渲染流程正常：
  1. Loader执行
  2. 组件渲染，Suspense显示fallback加载图标
  3. API请求发起并获取数据
  4. Promise解析，Await回调执行，渲染数据
• 再次提交GET表单时流程异常：
  1. Loader执行
  2. 组件渲染，但useLoaderData()返回旧数据（已resolved的deferred对象）
  3. Await直接执行回调，渲染旧内容
  4. API请求发起（URL此时才更新）
  5. 新数据返回后，组件重新渲染，useLoaderData()返回新数据
  6. Await再次执行回调，渲染新内容

相关代码片段 #

App组件（路由配置） #

function App() {
  const browserRouter = createBrowserRouter(
    createRoutesFromElements(
      <Route
        path="/"
        element={<HomePage />}
        loader={HomePageLoader}
      />
    )
  );

  return (
    <>
      <Navbar />
      <RouterProvider router={browserRouter} />
    </>
  );
}

API交互函数 #

export async function fetchDataFromColorAPI(targetUrl: string) {
  const response = await fetch(targetUrl);
  if (response.status !== 200) {
    throw new Error("Error occurred with API");
  }
  const data = await response.json();
  console.log("API data:  ",data.colors);
  return getColorsInfo(data.colors);
}

Loader函数 #

export function loader({ request }: LoaderFunctionArgs) {
  console.log("in loader");
  const params = new URL(request.url).searchParams;
  const { color, mode, count } = getSearchParams(params); //utility function to get search parameters
  const baseUrl = "https://www.thecolorapi.com/scheme";
  const searchQuery = `?hex=${color}&mode=${mode}&count=${count}&format=json`;

  return defer({ colorsInfo: fetchDataFromColorAPI(baseUrl + searchQuery) });
}

HomePage组件 #

export default function HomePage() {
  console.log("In component");

  const data = useLoaderData() as LoaderData;
  function renderPallet(colorsInfo: Color[]) {
    console.log("promise resolved, Values recieved: ", colorsInfo);
    return <Pallet colorsInfo={colorsInfo} />;
  }

  return (
    <main>
      <InputForm />
      <Suspense fallback={<h1>Loading....</h1>}>
        <Await resolve={data.colorsInfo}>{renderPallet}</Await>
      </Suspense>
    </main>
  );
}

Form组件 #

<Form replace className="form">
  {/* Input fields */}
</Form>

原因解释 #

这是React Router针对同路由客户端导航的优化机制：当使用GET方法的<Form>提交到同一路由时，React Router会先复用当前已有的loader数据（避免页面空白/闪烁），同时在后台异步重新执行loader获取新数据。只有当新的loader数据完全就绪后，才会替换旧数据并触发组件重新渲染。

对于deferred数据来说，旧数据里的Promise已经处于resolved状态，所以<Await>会直接渲染旧内容，直到新的deferred数据（包含未resolved的Promise）返回，才会触发Suspense的fallback。

解决方案 #

要在loader重新执行时强制显示加载状态（而非旧数据），可以通过useNavigation()钩子获取当前导航状态，结合状态控制渲染逻辑：

修改后的HomePage组件 #

import { useLoaderData, Await, Suspense, useNavigation } from "react-router-dom";

export default function HomePage() {
  const data = useLoaderData() as LoaderData;
  const navigation = useNavigation();
  // 判断是否处于加载状态（loader正在重新执行）
  const isLoading = navigation.state === "loading";

  function renderPallet(colorsInfo: Color[]) {
    console.log("promise resolved, Values recieved: ", colorsInfo);
    return <Pallet colorsInfo={colorsInfo} />;
  }

  return (
    <main>
      <InputForm />
      {/* 加载状态下直接显示fallback，否则渲染Await */}
      {isLoading ? (
        <h1>Loading....</h1>
      ) : (
        <Suspense fallback={<h1>Loading....</h1>}>
          <Await resolve={data.colorsInfo}>{renderPallet}</Await>
        </Suspense>
      )}
    </main>
  );
}

原理说明 #

• useNavigation().state会在loader重新执行时变为"loading"，此时直接显示加载状态，跳过旧数据的渲染
• 当新的loader数据（包含未resolved的Promise）返回后，navigation.state恢复为"idle"，此时<Suspense>会捕获Promise并显示fallback，直到API请求完成

补充说明 #

如果希望完全绕过React Router的客户端导航优化，强制刷新页面，可以给<Form>添加reloadDocument属性，但这会失去SPA的优势，不推荐：

<Form reloadDocument replace className="form">
  {/* 输入字段 */}
</Form>

内容的提问来源于stack exchange，提问作者azfar razzaq