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

写在前面

本篇是react学习的第十一篇，React Router 查询数据

React Router 查询数据

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

上篇我们讲了新增数据的逻辑，在我们的页面上点击New按钮后，新增了一条contact，并且页面跳转到了编辑页面，但是左边的contacts列表还是显示No contacts，现在我们就来编写代码查询contacts数据列表。

打开src\routes\root.jsx文件，添加如下代码，通过loader（加载器）获取数据，loader在路由跳转之前调用，并通过useLoaderData为要展示的组件提供数据。下面还使用了NavLink来替代Link，增加了active样式和pending样式：

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

export async function loader() {
    const contacts = await getContacts();
    return { contacts };
}

export default function Root() {
    const { contacts } = useLoaderData();
    return (
        <>
                {/* 其他代码，下面是替换的代码 */}
                <nav>
                    {contacts.length ? (
                        <ul>
                            {contacts.map((contact) => (
                                <li key={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>
                                </li>
                            ))}
                        </ul>
                    ) : (
                        <p>
                            <i>No contacts</i>
                        </p>
                    )}
                </nav>
                {/* 其他代码 */}
        </>
    );
}

同时需要在路由下配置loader，打开src\main.jsx文件，代码如下：

import React from "react";
import ReactDOM from "react-dom/client";
import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";
import "./index.css";
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 />,
    loader: rootLoader, // 增加部分
    action: rootAction,
    children: [
      {
        path: "contacts/:contactId/edit",
        element: <EditContact />,
        loader: contactLoader,
        action: editAction,
      },
    ],
  },
]);

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

此时我们再点击New按钮，左边列表会增加一个No Name的contact，因为我们还没有把他的信息更新，所以是No Name，下一篇文章我们就开始介绍编辑的逻辑

写在最后

做个总结：查询数据是通过路由的loader加载器，他会在路由跳转前被调用，所以我们在这个方法中调用查询数据的接口，然后在路由中通过useLoaderData()方法获取查询到的数据。

以上就是React Router 查询数据所有代码和说明