react-router-dom中路由配置中的action和loader

它们用于在路由配置中处理数据加载和表单提交等操作

loader

• loader 是用于在路由渲染之前加载数据的函数。它在导航到路由之前执行，并且可以返回数据或Promise，数据会被传递到组件的 props 中。
• 在路由渲染之前获取数据，例如从API获取数据、读取本地存储等。

• import { createBrowserRouter, RouterProvider, Route } from "react-router-dom";
  
  const fetchData = async () => {
    const response = await fetch("/api/data");
    return response.json();
  };
  
  const loader = async () => {
    const data = await fetchData();
    return { data };
  };
  
  const MyComponent = ({ data }) => {
    return (
      <div>
        <h1>Data Loaded</h1>
        <pre>{JSON.stringify(data, null, 2)}</pre>
      </div>
    );
  };
  
  const router = createBrowserRouter([
    {
      path: "/",
      element: <MyComponent />,
      loader: loader,
    },
  ]);
  
  function App() {
    return <RouterProvider router={router} />;
  }

  action

• action 是用于处理表单提交或其他提交操作的函数。它在提交事件触发时执行，可以处理提交的数据，并决定接下来的导航行为。
• 处理表单提交，例如登录、注册、创建或更新资源。
• 在提交之后进行重定向或显示反馈信息。

• import { createBrowserRouter, RouterProvider, Route, Form, redirect } from "react-router-dom";
  
  const submitData = async (formData) => {
    const response = await fetch("/api/submit", {
      method: "POST",
      body: JSON.stringify(Object.fromEntries(formData)),
      headers: {
        "Content-Type": "application/json",
      },
    });
    return response.json();
  };
  
  const action = async ({ request }) => {
    const formData = await request.formData();
    const result = await submitData(formData);
    if (result.success) {
      return redirect("/success");
    } else {
      return { error: result.error };
    }
  };
  
  const MyFormComponent = () => {
    return (
      <Form method="post">
        <label>
          Name: <input type="text" name="name" />
        </label>
        <button type="submit">Submit</button>
      </Form>
    );
  };
  
  const SuccessComponent = () => <h1>Form Submitted Successfully!</h1>;
  
  const router = createBrowserRouter([
    {
      path: "/",
      element: <MyFormComponent />,
      action: action,
    },
    {
      path: "/success",
      element: <SuccessComponent />,
    },
  ]);
  
  function App() {
    return <RouterProvider router={router} />;
  }

  总结

• loader 用于在路由渲染之前加载数据，适合在组件渲染前获取所需的数据。
• action 用于处理提交操作，适合处理表单提交、数据保存等操作，并可以根据结果进行重定向或反馈。
• 这两个功能使得 react-router-dom v6 提供了一种更清晰和集中化的数据处理和提交处理方式，有助于保持组件的简洁性和可维护性。