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

本文链接：https://blog.youkuaiyun.com/gitblog_00030/article/details/148324576

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

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

前言

React Router 是 React 生态中最流行的路由解决方案之一。本教程将带你从零开始，使用 React Router 构建一个功能完整的联系人管理系统。通过这个项目，你将学习到 React Router 的核心概念和实用技巧。

项目初始化

在开始之前，我们需要搭建基本的 React 项目结构。这里推荐使用 Vite 作为构建工具，因为它提供了极快的开发体验。

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/routes 目录存放路由组件
添加联系人数据模块 src/contacts.js
设置基础样式 src/index.css

基础路由配置

1. 创建根路由

首先在 main.jsx 中配置基本的路由结构：

import { createBrowserRouter, RouterProvider } from "react-router-dom";
import Root from "./routes/root";
import ErrorPage from "./error-page";

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 作为应用的布局框架：

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

export default function Root() {
  return (
    <>
      <div id="sidebar">
        <h1>React Router Contacts</h1>
        {/* 导航和搜索表单 */}
      </div>
      <div id="detail">
        <Outlet />
      </div>
    </>
  );
}

<Outlet> 是 React Router 提供的占位组件，用于渲染子路由内容。

错误处理

良好的错误处理是用户体验的重要组成部分。React Router 提供了 errorElement 属性来定制错误页面。

// src/error-page.jsx
import { useRouteError } from "react-router-dom";

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

嵌套路由与动态路由

1. 创建联系人详情页

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

2. 配置嵌套路由

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

数据加载

React Router 提供了优雅的数据加载方案，通过 loader 函数和 useLoaderData hook 实现。

1. 定义数据加载器

// src/routes/root.jsx
import { getContacts } from "../contacts";

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

2. 使用加载的数据

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

数据变更与表单处理

React Router 提供了与 HTML 表单相似但更强大的数据变更机制。

1. 创建联系人

// src/routes/root.jsx
import { Form } from "react-router-dom";

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

// 在组件中使用
<Form method="post">
  <button type="submit">New</button>
</Form>

2. 更新联系人

// src/routes/contact.jsx
<Form method="post" action="edit">
  <button type="submit">Edit</button>
</Form>

优化用户体验

1. 客户端导航

使用 <Link> 替代 <a> 标签实现无刷新导航：

<Link to={`contacts/${contact.id}`}>
  {contact.first} {contact.last}
</Link>

2. 加载状态处理

React Router 提供了 useNavigation hook 来处理导航状态：

const navigation = useNavigation();
const busy = navigation.state === "submitting";
<button type="submit" disabled={busy}>
  {busy ? "Saving..." : "Save"}
</button>