React Router 入门教程：构建联系人管理系统-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00808/article/details/148324523

React Router 入门教程：构建联系人管理系统

react-router 项目地址: https://gitcode.com/gh_mirrors/reac/react-router

本文将带你使用 React Router 构建一个功能完整的联系人管理系统，涵盖路由配置、数据加载、表单处理等核心功能。

项目概述

我们将创建一个具有以下功能的联系人管理应用：

联系人列表展示
联系人详情查看
联系人创建、编辑和删除
搜索和收藏功能

预计完成时间：30-60分钟

环境准备

创建React项目

使用Vite快速搭建React项目：

npm create vite@latest contacts-app -- --template react
cd contacts-app
npm install react-router-dom localforage match-sorter sort-by
npm run dev

添加必要文件

创建以下文件结构：

src
├── contacts.js    # 数据模块
├── index.css      # 样式文件
└── main.jsx       # 应用入口

基础路由配置

1. 初始化路由

在main.jsx中配置基础路由：

import { createBrowserRouter, RouterProvider } from "react-router-dom";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    errorElement: <ErrorPage />,
  }
]);

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

2. 创建根布局组件

src/routes/root.jsx：

export default function Root() {
  return (
    <>
      <div id="sidebar">
        <h1>React Router Contacts</h1>
        {/* 导航和表单 */}
      </div>
      <div id="detail">
        {/* 子路由内容将在这里渲染 */}
      </div>
    </>
  );
}

错误处理

创建自定义错误页面：

import { useRouteError } from "react-router-dom";

export default function ErrorPage() {
  const error = useRouteError();
  return (
    <div id="error-page">
      <h1>Oops!</h1>
      <p>{error.statusText || error.message}</p>
    </div>
  );
}

嵌套路由

1. 创建联系人详情组件

src/routes/contact.jsx：

export default function Contact() {
  // 联系人详情UI
  return (
    <div id="contact">
      {/* 联系人信息展示 */}
    </div>
  );
}

2. 配置嵌套路由

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    errorElement: <ErrorPage />,
    children: [
      {
        path: "contacts/:contactId",
        element: <Contact />,
      }
    ]
  }
]);

3. 添加Outlet

在根组件中添加Outlet以渲染子路由：

import { Outlet } from "react-router-dom";

function Root() {
  return (
    <>
      {/* 其他内容 */}
      <div id="detail">
        <Outlet />
      </div>
    </>
  );
}

数据加载

1. 创建loader函数

import { getContacts } from "../contacts";

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

2. 配置路由loader

{
  path: "/",
  element: <Root />,
  loader: rootLoader,
  // ...
}

3. 使用加载的数据

import { useLoaderData } from "react-router-dom";

function Root() {
  const { contacts } = useLoaderData();
  return (
    <nav>
      {contacts.map(contact => (
        <Link to={`contacts/${contact.id}`} key={contact.id}>
          {contact.first} {contact.last}
        </Link>
      ))}
    </nav>
  );
}

数据写入

1. 创建action处理表单提交

import { createContact } from "../contacts";

export async function action() {
  const contact = await createContact();
  return { contact };
}

2. 使用Form组件

import { Form } from "react-router-dom";

function Root() {
  return (
    <Form method="post">
      <button type="submit">New</button>
    </Form>
  );
}

3. 配置路由action

{
  path: "/",
  element: <Root />,
  action: rootAction,
  // ...
}

完整功能实现

联系人详情加载

export async function loader({ params }) {
  const contact = await getContact(params.contactId);
  return { contact };
}

编辑联系人

export async function action({ request, params }) {
  const formData = await request.formData();
  return updateContact(params.contactId, {
    favorite: formData.get("favorite") === "true",
  });
}

删除联系人

<Form
  method="post"
  action="destroy"
  onSubmit={(event) => {
    if (!confirm("确认删除吗？")) {
      event.preventDefault();
    }
  }}
>
  <button type="submit">Delete</button>
</Form>