React Router v6教程：FormData更新联系人后详情页不刷新求助

完成React Router v6教程的「Updating Contacts with Form Data」章节后，出现以下问题：点击左侧联系人名称时，右侧详情区域无法更新，始终显示默认的“No Name”。已重复操作两次，问题依旧。

相关代码片段 #

src/routes/edit.jsx #

import { Form, useLoaderData, redirect } from "react-router-dom";
import { updateContact } from "../contacts";

export async function action({ request, params}) {
    const formData = await request.formData();
    const updates = Object.fromEntries(formData);
    await updateContact(params.contactId, updates);
    return redirect(`/contacts/${params.contactId}`);
}

src/main.jsx #

import * as React from "react";
import * as ReactDOM from "react-dom/client";
import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";
import "./index.css";
import ErrorPage from "./error-page";
import Contact, { loader as contactLoader } from "./routes/contact";
import Root, { loader as rootLoader, action as rootAction } from "./routes/root";
import EditContact, { action as editAction } from "./routes/edit";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    errorElement: <ErrorPage />,
    loader: rootLoader,
    action: rootAction,
    children: [
      {
        path:"contacts/:contactId",
        element: <Contact />,
        loader: contactLoader,
      },
      {
        path:"contacts/:contactId/edit",
        element: <EditContact />,
        loader: contactLoader,
        action: editAction,
      },
    ],
  },
]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

src/routes/root.jsx（参考） #

<div id="detail">
  <Outlet />
</div>

排查方向建议 #

• 检查contactLoader的实现：确认它是否能根据params.contactId正确获取最新联系人数据，返回的数据结构是否符合Contact组件的预期。如果loader没有返回更新后的数据，组件会一直使用旧缓存值。
• 验证updateContact函数逻辑：确认该函数是否真正修改了数据源中的联系人信息。若数据源未被正确更新，路由跳转后loader获取的还是旧数据。
• 确认loader重新触发：React Router v6中从编辑页redirect到详情页时，应重新触发详情页的loader。可在contactLoader中添加日志，检查跳转后是否执行了新的请求。
• 检查Contact组件渲染逻辑：确认组件是否正确通过useLoaderData()获取数据，是否存在误用状态导致无法响应loader数据更新的情况。

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