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

写在前面

本篇是react学习的第十篇，React Router 新增数据

React Router 增加数据

建议是看过我上篇文章（react入门9）再来看下面内容，这样比较有连续性。该系列所有的代码都是跟着官网教程进行。

先在src目录下新建contacts.js文件，复制粘贴以下代码 ☞ js代码，这些代码用来模拟接口返回数据，与React Router 加载数据无关，不用细看。但也简单说明一下，理解逻辑：

// 查
getContacts(query) // 获取contacts列表
// 增
createContact() // 往contacts列表插入一条contact
// 获取contact详情
getContact(id) // 获取id对应的contact
// 改
updateContact(id, updates) // 将updates的内容复制到id对应的contact的内容，即更新contact
// 删
deleteContact(id) // 删除一条contact记录

set(contacts) // 存储contacts列表，使用了离线缓存 localForage

fakeNetwork(key) // 伪造一个缓存，我们已经查过的信息不给他延迟

然后打开src\routes\root.jsx文件，添加替换如下代码：

import { Outlet, Link, Form } from "react-router-dom";
import { createContact } from "../contacts";

export async function action() {
    const contact = await createContact();
    return redirect(`/contacts/${contact.id}/edit`);
}

// 原本的代码
<form method="post">
    <button type="submit">New</button>
</form>
// 替换为
<Form method="post">
    <button type="submit">New</button>
</Form>

<Form method="post">会调用对应路由的action，在action中我们调用createContact()接口增加一个contact，同时页面跳转到编辑页面，编辑刚刚新增的contact的信息，这和我们平常做的先填写表单再新增数据顺序不一样，但是没关系，我们的主要目的是了解React Router

再打开src\main.jsx文件，在路由上添加action，因为还要跳转到/contacts/${contact.id}/edit，所以在这里把"./routes/edit"也引入进来，这个文件现在还没有创建，先把代码写好：

import Root, { action as rootAction } from "./routes/root";
import EditContact, { action as editAction } from "./routes/edit";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    action: rootAction,
    children: [
      {
        path: "contacts/:contactId/edit",
        element: <EditContact />,
      }
    ],
  },
]);

再新增src\routes\edit.jsx文件，代码如下，编辑的代码在后面的文章会介绍到，这里先把代码复制粘贴上，让项目能运行：

import {
    Form,
    useLoaderData,
    redirect,
    useNavigate
} 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}`);
}

export default function EditContact() {
    const contact = useLoaderData();
    const navigate = useNavigate();

    return (
        <Form method="post" id="contact-form">
            <p>
                <span>Name</span>
                <input
                    placeholder="First"
                    aria-label="First name"
                    type="text"
                    name="first"
                    defaultValue={contact.first}
                />
                <input
                    placeholder="Last"
                    aria-label="Last name"
                    type="text"
                    name="last"
                    defaultValue={contact.last}
                />
            </p>
            <label>
                <span>Twitter</span>
                <input
                    type="text"
                    name="twitter"
                    placeholder="@jack"
                    defaultValue={contact.twitter}
                />
            </label>
            <label>
                <span>Avatar URL</span>
                <input
                    placeholder="https://example.com/avatar.jpg"
                    aria-label="Avatar URL"
                    type="text"
                    name="avatar"
                    defaultValue={contact.avatar}
                />
            </label>
            <label>
                <span>Notes</span>
                <textarea
                    name="notes"
                    defaultValue={contact.notes}
                    rows={6}
                />
            </label>
            <p>
                <button type="submit">Save</button>
                <button type="button" onClick={() => {
                    navigate(-1);
                }}>Cancel</button>
            </p>
        </Form>
    );
}

现在我们点击New按钮，就会新增一条数据并且页面跳转到编辑页面

到这里我们新增数据的逻辑就介绍结束了，下篇文章介绍查询数据的逻辑

写在最后

以上就是React Router 新增数据所有代码和说明

react入门10：React Router 新增数据

写在前面

React Router 增加数据

写在最后