# vite-react-route

**Repository Path**: panws/vite-react-route

## Basic Information

- **Project Name**: vite-react-route
- **Description**: react-router v6 官方教程案例
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-04-19
- **Last Updated**: 2024-04-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# React + Vite + react-router-dom

官方案例实战

### 保存路径历史

```jsx
export async function loader({ request }) {
  const url = new URL(request.url);
  const q = url.searchParams.get("q");
  const contacts = await getContacts(q);
  return { contacts, q };
}
```

## 客户端路由

### 1. 加载数据 loader

加载数据并将数据返回给组件

```jsx
<Route
  path="dashboard"
  loader={async () => {
    const user = await fake.getUser();
    if (!user) {
      // if you know you can't render the route, you can
      // throw a redirect to stop executing code here,
      // sending the user to a new route
      throw redirect("/login");
    }

    // otherwise continue
    const stats = await fake.getDashboardStats();
    return { user, stats };
  }}
/>
```

加载数据，发生重定向

```jsx
<Route
  path="project/new"
  action={async ({ request }) => {
    const data = await request.formData();
    const newProject = await createProject(data);
    // it's common to redirect after actions complete,
    // sending the user to the new record
    return redirect(`/projects/${newProject.id}`);
  }}
/>
```

- 待定导航用户界面，显示加载 loading
- 当用户浏览应用程序时，下一页的数据会在页面呈现之前加载。在这段时间内提供用户反馈非常重要，这样才不会让人感觉应用程序反应迟钝。

```jsx
function Root() {
  const navigation = useNavigation();
  return (
    <div>
      {navigation.state === "loading" && <GlobalSpinner />}
      <FakeSidebar />
      <Outlet />
      <FakeFooter />
    </div>
  );
}
```

带有`<Suspense>`的骨架屏用户界面

```jsx
<Route
  path="issue/:issueId"
  element={<Issue />}
  loader={async ({ params }) => {
    // these are promises, but *not* awaited
    const comments = fake.getIssueComments(params.issueId);
    const history = fake.getIssueHistory(params.issueId);
    // the issue, however, *is* awaited
    const issue = await fake.getIssue(params.issueId);

    // defer enables suspense for the un-awaited promises
    return defer({ issue, comments, history });
  }}
/>;

function Issue() {
  const { issue, history, comments } = useLoaderData();
  return (
    <div>
      <IssueDescription issue={issue} />

      {/* Suspense provides the placeholder fallback */}
      <Suspense fallback={<IssueHistorySkeleton />}>
        {/* Await manages the deferred data (promise) */}
        <Await resolve={history}>
          {/* this calls back when the data is resolved */}
          {(resolvedHistory) => <IssueHistory history={resolvedHistory} />}
        </Await>
      </Suspense>

      <Suspense fallback={<IssueCommentsSkeleton />}>
        <Await resolve={comments}>
          {/* ... or you can use hooks to access the data */}
          <IssueComments />
        </Await>
      </Suspense>
    </div>
  );
}

function IssueComments() {
  const comments = useAsyncValue();
  return <div>{/* ... */}</div>;
}
```

### 2.提交数据（数据突变） action

```jsx
<Form action="/project/new">
  <label>
    Project title
    <br />
    <input type="text" name="title" />
  </label>

  <label>
    Target Finish Date
    <br />
    <input type="date" name="due" />
  </label>
</Form>
<Route
  path="project/new"
  action={async ({ request }) => {
    const formData = await request.formData();
    const newProject = await createProject({
      title: formData.get("title"),
      due: formData.get("due"),
    });
    return redirect(`/projects/${newProject.id}`);
  }}
/>
```

#### 数据重新验证

几十年前的网络惯例表明，当表单发布到服务器时，数据就会发生变化，并渲染新的页面。React Router 基于 HTML 的数据突变 API 遵循了这一惯例。

调用路由操作后，页面上所有数据的加载器将再次被调用，以确保用户界面自动保持最新数据。无需过期缓存键，无需重新加载上下文提供程序。

#### 繁忙的指示器,显示提交中

当表单提交到路由操作时，您可以访问导航状态，以显示繁忙指示器、禁用字段集等。

```jsx
function NewProjectForm() {
  const navigation = useNavigation();
  const busy = navigation.state === "submitting";
  return (
    <Form action="/project/new">
      <fieldset disabled={busy}>
        <label>
          Project title
          <br />
          <input type="text" name="title" />
        </label>

        <label>
          Target Finish Date
          <br />
          <input type="date" name="due" />
        </label>
      </fieldset>
      <button type="submit" disabled={busy}>
        {busy ? "Creating..." : "Create"}
      </button>
    </Form>
  );
}
```

### 3. 优化用户界面

即使异步工作仍处于待处理状态，了解发送到 action 的 formData 通常也足以跳过繁忙指示器，立即以下一状态渲染用户界面。这就是所谓的 "优化用户界面"。

```jsx
function LikeButton({ tweet }) {
  const fetcher = useFetcher();

  // if there is `formData` then it is posting to the action
  const liked = fetcher.formData
    ? // check the formData to be optimistic
      fetcher.formData.get("liked") === "yes"
    : // if its not posting to the action, use the record's value
      tweet.liked;

  return (
    <fetcher.Form method="post" action="toggle-liked">
      <button type="submit" name="liked" value={liked ? "yes" : "no"} />
    </fetcher.Form>
  );
}
```

（是的，HTML 按钮可以有 name 和 value ）。
虽然更常见的是使用 fetcher 来优化用户界面，但也可以使用 navigation.formData 对普通表单执行相同的操作。

#### 数据 Fetchers

HTML 表单是突变的典范，但它有一个很大的局限性：一次只能有一个突变，因为表单提交就是一次导航。

大多数 Web 应用都需要允许同时发生多个突变，就像一个记录列表，每条记录都可以被独立删除、标记为完整、被收藏等。

Fetcher 允许您与路由 action 和 loader 进行交互，而不会在浏览器中导致导航，同时还能获得所有传统优势，如错误处理、重新验证、中断处理和竞争条件处理。

想象一下任务列表：

```jsx
function Tasks() {
  const tasks = useLoaderData();
  return tasks.map((task) => (
    <div>
      <p>{task.name}</p>
      <ToggleCompleteButton task={task} />
    </div>
  ));
}
```

```jsx
function ToggleCompleteButton({ task }) {
  const fetcher = useFetcher();
  return (
    <fetcher.Form method="post" action="/toggle-complete">
      <fieldset disabled={fetcher.state !== "idle"}>
        <input type="hidden" name="id" value={task.id} />
        <input
          type="hidden"
          name="status"
          value={task.complete ? "incomplete" : "complete"}
        />
        <button type="submit">
          {task.status === "complete" ? "Mark Incomplete" : "Mark Complete"}
        </button>
      </fieldset>
    </fetcher.Form>
  );
}
```

### 4. 竞争条件处理, 无需防抖和节流了

- 如果使用 React Router 的数据约定，就可以完全自动地避免这个问题。
- React Router 不仅能处理类似导航的竞争条件，还能处理许多其他情况，如加载自动完成的结果或使用 fetcher 执行多个并发突变（及其自动并发重验证）。

```jsx
?q=ry    |-----------X
                     ^ cancel wrong state when
                       correct state completes earlier
?q=ryan     |--------|
                     ^ commit correct state
```

### 5. 错误处理

React Router 会自动处理应用程序中的绝大多数错误。它将捕获在以下情况下抛出的任何错误：

- 渲染
- 加载数据
- 更新数据

在实践中，除了在事件处理程序（ `<button onClick>` ）或 `useEffect` 中抛出的错误外，应用程序中几乎所有的错误都是这样。React Router 应用程序往往很少出现这两种错误。

当出现错误时，不会渲染路由的 `element` ，而是渲染 `errorElement` 。

```jsx
<Route
  path="/"
  loader={() => {
    something.that.throws.an.error();
  }}
  // this will not be rendered
  element={<HappyPath />}
  // but this will instead
  errorElement={<ErrorBoundary />}
/>
```

如果路由没有 errorElement ，则错误会冒泡到最近的有 errorElement 的父路由：

```jsx
<Route path="/" element={<HappyPath />} errorElement={<ErrorBoundary />}>
  {/* Errors here bubble up to the parent route */}
  <Route path="login" element={<Login />} />
</Route>
```

### 6. 滚动恢复

React Router 将在导航时模拟浏览器的滚动恢复，在滚动前等待数据加载。这将确保滚动位置恢复到正确的位置。

您还可以自定义行为，根据位置以外的其他因素（如 url 路径名）进行还原，并防止在某些链接（如页面中间的标签页）上发生滚动。

参阅：

- `<ScrollRestoration>`

### 7. Web 标准 API

- `React Router` 基于 `Web` 标准 `API` 构建的。
- `loader` 和 `action` 接收标准的 `Web Fetch APIRequest` 对象，并且也可以返回 `Response` 对象。
- 取消操作是通过 `Abort Signals` 完成的，搜索参数是通过 `URLSearchParams` 处理的，数据变更是通过 `HTML Forms` 处理的。

- 你熟练掌握 `React Router` 时，你也就熟练掌握了 `Web` 平台。