开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第44天，点击查看活动详情

写在前面

本篇是react学习的第十二篇，介绍React Router 获取数据详情

React Router 编辑数据

建议从我的文章：react入门9，这样比较有连续性。该系列所有的代码都是跟着官网教程进行。

上篇文章我们讲了查询数据的逻辑，src\routes\root.jsx文件中添加了如下代码，NavLink会使我们在点击一条contact记录的时候路由跳转到contacts/${contact.id}（to={contacts/${contact.id}}），这个页面可以称为一条数据的详情页面：

<NavLink
    to={`contacts/${contact.id}`}
    className={({ isActive, isPending }) =>
        isActive
            ? "active"
            : isPending
                ? "pending"
                : ""
    }
>
    {contact.first || contact.last ? (
        <>
            {contact.first} {contact.last}
        </>
    ) : (
        <i>No Name</i>
    )}{" "}
    {contact.favorite && <span>★</span>}
</NavLink>

现在我们的代码中还没有详情页面，所以我们新增src\routes\Contact.jsx文件，文件代码如下，在该文件下调用了getContact()接口获取一条contact记录的详情信息，同样也是在loader加载器中调用接口，通过useLoaderData()方法获取接口返回的数据：

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

export async function loader({ params }) {
  return getContact(params.contactId);
}

export default function Contact() {
  const contact = useLoaderData();

  return (
    <div id="contact">
      <div>
        <img
          key={contact.avatar}
          src={contact.avatar || null}
        />
      </div>

      <div>
        <h1>
          {contact.first || contact.last ? (
            <>
              {contact.first} {contact.last}
            </>
          ) : (
            <i>No Name</i>
          )}{" "}
          <Favorite contact={contact} />
        </h1>

        {contact.twitter && (
          <p>
            <a
              target="_blank"
              href={`https://twitter.com/${contact.twitter}`}
            >
              {contact.twitter}
            </a>
          </p>
        )}

        {contact.notes && <p>{contact.notes}</p>}

        <div>
          <Form action="edit">
            <button type="submit">Edit</button>
          </Form>
          <Form
            method="post"
            action="destroy"
            onSubmit={(event) => {
              if (
                !confirm(
                  "Please confirm you want to delete this record."
                )
              ) {
                event.preventDefault();
              }
            }}
          >
            <button type="submit">Delete</button>
          </Form>
        </div>
      </div>
    </div>
  );
}

function Favorite({ contact }) {
  // yes, this is a `let` for later
  let favorite = contact.favorite;
  return (
    <Form method="post">
      <button
        name="favorite"
        value={favorite ? "false" : "true"}
        aria-label={
          favorite
            ? "Remove from favorites"
            : "Add to favorites"
        }
      >
        {favorite ? "★" : "☆"}
      </button>
    </Form>
  );
}

同时将contacts/${contact.id}添加到路由中，打开src\main.jsx文件，修改代码如下，可以看到，增加了一个path为contacts/:contactId的路由，同时配置了loader为上面routes/contact中定义的loader：

// 其他代码
import Contact, { loader as contactLoader } from "./routes/contact"; // 增加的代码

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

此时我们再打开项目http://127.0.0.1:5173/ ，点击一条contact记录（No Name），右边会显示这条记录的详细信息：

同时点击Edit按钮，页面会跳转到contacts/:contactId/edit页面，可以进行信息的编辑，我们可以尝试信息填写和保存，都可以进行，因为我们在上篇文章已经将src\routes\edit.jsx的代码写好了，下一篇文章我们就来分析一下src\routes\edit.jsx代码的逻辑

写在最后

以上就是React Router 获取数据详情所有代码和说明

react入门12：React Router 获取数据详情

写在前面

React Router 编辑数据

写在最后