React Router 6.4嵌套路由Deferred问题：父列表随详情重复加载

问题场景与现象 #

在嵌套路由架构下：

• 父路由/：加载并展示条目列表，加载时显示绿色加载指示器
• 子路由/:id：作为嵌套路由展示单个条目详情，期望加载时显示蓝色加载指示器

实际行为：点击列表项跳转至详情页时，父页面的绿色加载指示器会重新显示，仿佛父列表被重新加载，而非仅显示详情页的加载状态。

原因分析 #

1. 详情页的Suspense未包裹Await组件：
   当Await处理未resolved的Promise时会抛出该Promise，需要同级的Suspense组件捕获并显示fallback。你当前的详情页中Suspense标签是空的，Await组件未被包裹，导致Promise向上冒泡到父页面的Suspense，触发了父页面的加载指示器。

2. 父页面类型断言错误：
   useLoaderData()返回的是defer包装的对象，其中characterCollection是Promise<Character[]>类型，但你错误断言为Character[]，虽未直接引发问题，但会导致类型提示失效，增加潜在风险。

解决方案与代码修正 #

1. 修正详情页的Suspense结构 #

将Await组件包裹到Suspense内部，确保详情页的加载Promise由自身的Suspense处理：

import React from "react";
import { Await, useLoaderData } from "react-router-dom";
import { Character } from "../api/model";

export const DetailPage: React.FunctionComponent = () => {
  const data = useLoaderData() as { character: Promise<Character> };

  return (
    <div>
      <h1>Detail</h1>
      {/* 将Await组件包裹在Suspense内部 */}
      <React.Suspense
        fallback={<h4 style={{ color: "blue" }}>👩🏻 Loading character...</h4>}
      >
        <Await resolve={data.character}>
          {(character) => (
            <div>
              <img src={character.image} alt={character.name} />
              <h2>{character.name}</h2>
              <p>{character.status}</p>
            </div>
          )}
        </Await>
      </React.Suspense>
    </div>
  );
};

2. 修正父页面的类型断言 #

匹配defer返回的实际类型，避免类型错误：

import React from "react";
import { Await, Link, Outlet, useLoaderData } from "react-router-dom";
import { Character } from "../api/model";

export const ListPage = () => {
  // 修正类型断言，characterCollection为Promise类型
  const characters = useLoaderData() as { characterCollection: Promise<Character[]> };

  return (
    <div>
      <h2>Character Collection</h2>
      <React.Suspense
        fallback={<h4 style={{ color: "green" }}>👬 Loading characters...</h4>}
      >
        <Await resolve={characters.characterCollection}>
          {(characters) => (
            <div style={{ display: "flex", flexDirection: "row" }}>
              <div>
                <ul>
                  {characters.map((character) => (
                    <li key={character.id}>
                      <Link to={`./${character.id}`}>{character.name}</Link>
                    </li>
                  ))}
                </ul>
              </div>
              <Outlet />
            </div>
          )}
        </Await>
      </React.Suspense>
    </div>
  );
};

修正效果 #

调整后，跳转至详情页时：

• 父页面的列表内容保持展示状态，不会触发绿色加载指示器
• 详情页的蓝色加载指示器单独显示，加载完成后展示详情内容

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