Remix 学习 - @remix-run/react 中主要的 hooks

在 @remix-run/react 中，有几个常用的 hooks，它们帮助你在 Remix 应用中处理路由、数据加载和其他功能。以下是一些主要的 hooks：

useLoaderData:

用于获取从 loader 函数中返回的数据。

通常在组件中调用，以便访问路由加载的数据。

javascript 复制代码

import { useLoaderData } from "@remix-run/react";

export function MyComponent() {
  const data = useLoaderData();
  return <div>{data.someValue}</div>;
}

useActionData:

用于获取 action 函数返回的数据。

在处理表单提交后，可以用它来访问服务器响应的数据。

javascript 复制代码

import { useActionData } from "@remix-run/react";

export function MyComponent() {
  const actionData = useActionData();

  return (
    <div>
      {actionData ? <p>Response: {actionData.message}</p> : null}
    </div>
  );
}

useNavigate:

提供导航功能，允许你编程式地更改路由。

类似于 React Router 的 useNavigate。

javascript 复制代码

import { useNavigate } from "@remix-run/react";

export function MyComponent() {
  const navigate = useNavigate();
  return <button onClick={() => navigate("/some-path")}>Go</button>;
}

useParams:

用于访问路由参数。

在动态路由中很有用。

javascript 复制代码

import { useParams } from "@remix-run/react";

export function MyComponent() {
  const params = useParams();
  return <div>Parameter: {params.id}</div>;
}

useFetcher:

用于执行加载器之外的 GET 或 POST 请求。

可以在不导航的情况下获取数据或提交表单。

javascript 复制代码

import { useFetcher } from "@remix-run/react";

export function MyComponent() {
  const fetcher = useFetcher();

  useEffect(() => {
    fetcher.load("/api/data");
  }, []);

  return <div>{fetcher.data ? fetcher.data.result : "Loading..."}</div>;
}

useTransition:

用于获取当前的过渡状态。

可以帮助你在导航时显示加载指示器。

javascript 复制代码

import { useTransition } from "@remix-run/react";

export function MyComponent() {
  const transition = useTransition();

  return (
    <div>
      {transition.state === "loading" ? <p>Loading...</p> : <p>Loaded!</p>}
    </div>
  );
}

useSubmit:

用于提交表单或进行数据请求。

可以通过编程方式提交表单，并指定方法（如 POST）。

javascript 复制代码

import { useSubmit } from "@remix-run/react";

export function MyComponent() {
  const submit = useSubmit();

  const handleSubmit = (event) => {
    event.preventDefault();
    const formData = new FormData(event.currentTarget);
    submit(formData, { method: "post" });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="field" />
      <button type="submit">Submit</button>
    </form>
  );
}

useRouteError:

用于处理路由错误。

可以捕获并显示在路由加载或执行时发生的错误。

javascript 复制代码

import { useRouteError } from "@remix-run/react";

export function MyComponent() {
  const error = useRouteError();

  return (
    <div>
      {error ? <p>Error: {error.message}</p> : <p>No error</p>}
    </div>
  );
}

useOutlet:

用于渲染嵌套路由。

类似于 React Router 的 Outlet，用于在父路由中渲染子路由的内容。

javascript 复制代码

import { useOutlet } from "@remix-run/react";

export function ParentComponent() {
  const outlet = useOutlet();

  return (
    <div>
      <h1>Parent Component</h1>
      {outlet}
    </div>
  );
}

useSearchParams:

用于读取和修改 URL 的查询参数。

提供与 URLSearchParams 类似的功能。

javascript 复制代码

 import { useSearchParams } from "@remix-run/react";

 export function MyComponent() {
   const [searchParams, setSearchParams] = useSearchParams();

   const handleClick = () => {
     setSearchParams({ key: "value" });
   };

   return (
     <div>
       <p>Query: {searchParams.get("key")}</p>
       <button onClick={handleClick}>Change Query</button>
     </div>
   );
 }