React Router 6路由渲染后更新路由数据实现动态面包屑

核心结论 #

可以通过更新路由loader的返回数据并触发路由重载，让useMatches钩子重新执行，从而渲染动态面包屑标签。

具体实现步骤 #

1. 为目标路由添加loader，返回动态数据
   在需要动态面包屑的路由（比如用户详情页）配置中，添加loader函数获取动态数据：

// 路由配置示例
{
  path: "users/:userId",
  id: "user-info",
  loader: async ({ params }) => {
    // 异步获取用户数据
    const user = await fetchUser(params.userId);
    return { user }; // 将动态数据返回给路由
  },
  element: <UserInfo />
}

2. 在面包屑组件中读取loader数据
   修改createBreadcrumbList函数，从route的data属性中提取动态标签：

const matches = useMatches();

function createBreadcrumbList() {
  const breadcrumb = [];
  matches.forEach((route, index) => {
    let crumbLabel = BREADCRUMB_PAGE_MAP[route.id];
    if (!crumbLabel) return;

    // 针对用户详情路由，替换为动态数据
    if (route.id === "user-info" && route.data?.user) {
      const { name, id } = route.data.user;
      crumbLabel = `${name} (${id})`;
    }

    const crumb = {
      label: crumbLabel,
      ...(matches.length - index > 1 && { to: route.pathname })
    };
    breadcrumb.push(crumb);
  });
  return breadcrumb;
}

3. 触发路由重载更新数据
   当动态数据发生变化时（比如用户编辑名称后），调用useNavigation的reload方法触发路由loader重新执行，useMatches会随之更新：

// 在用户编辑组件中
const navigation = useNavigation();

const handleSave = async (updatedUser) => {
  await updateUser(updatedUser);
  navigation.reload(); // 重载当前路由，更新loader数据
};

替代方案：利用路由state #

如果不想使用loader，也可以在获取动态数据后，通过navigate更新当前路由的state：

const navigate = useNavigate();

// 获取用户数据后更新路由state
navigate(route.pathname, {
  state: { ...route.state, userLabel: `${name} (${id})` },
  replace: true // 替换当前历史记录，避免冗余跳转
});

然后在面包屑组件中从route.state读取标签：

if (route.id === "user-info" && route.state?.userLabel) {
  crumbLabel = route.state.userLabel;
}

内容的提问来源于stack exchange，提问作者Adnan Arif Sait