react router 常用的hooks

React Router 是 React 生态中用于管理路由的流行库，尤其在版本 6（React Router v6）中，提供了多个功能强大的 Hooks 来帮助开发者处理路由相关的逻辑。以下是 React Router v6 中常用的 Hooks，附带详细说明和典型用法：

---

1. useNavigate

• 作用：提供编程式导航功能，替代 v5 中的 useHistory。
• 返回：一个函数，用于跳转到指定路由。
• 用法：

  import { useNavigate } from "react-router-dom";
  
  function MyComponent() {
    const navigate = useNavigate();
  
    const handleClick = () => {
      navigate("/about"); // 跳转到 /about
      navigate(-1); // 后退一步
      navigate("/product", { replace: true }); // 替换当前历史记录
      navigate("/search?q=test"); // 带查询参数
    };
  
    return <button onClick={handleClick}>Go to About</button>;
  }
  

• 参数：
  • 路径字符串（如 "/about"）或数字（如 -1 表示后退）。
  • 可选对象：{ replace: true }（替换历史记录）、{ state: { key: "value" } }（传递状态）。
• 常见场景：按钮点击跳转、表单提交后重定向。

---

2. useLocation

• 作用：获取当前路由的完整位置信息。
• 返回：一个 location 对象，包含 pathname、search、hash、state 等属性。
• 用法：

  import { useLocation } from "react-router-dom";
  
  function MyComponent() {
    const location = useLocation();
  
    console.log(location.pathname); // 当前路径，如 "/about"
    console.log(location.search); // 查询字符串，如 "?q=test"
    console.log(location.state); // 通过 navigate 传递的状态
  
    return <div>当前路径: {location.pathname}</div>;
  }
  

• 常见场景：根据当前路径动态渲染内容，解析查询参数（如 ?id=123）。

---

3. useParams

• 作用：提取动态路由参数。
• 返回：一个对象，包含当前路由中的参数（与路由路径中的 :param 对应）。
• 用法：

  import { useParams } from "react-router-dom";
  
  // 路由定义: <Route path="/user/:id" element={<MyComponent />} />
  function MyComponent() {
    const { id } = useParams(); // 从路径 /user/123 中提取 id
  
    return <div>用户 ID: {id}</div>;
  }
  

• 常见场景：获取 URL 中的动态部分（如用户 ID、产品 ID），用于加载特定数据。

---

4. useSearchParams

• 作用：读取和修改 URL 查询参数，提供类似 URLSearchParams 的接口。
• 返回：一个数组 [searchParams, setSearchParams]：
  • searchParams：当前查询参数对象。
  • setSearchParams：更新查询参数的函数。
• 用法：

  import { useSearchParams } from "react-router-dom";
  
  function MyComponent() {
    const [searchParams, setSearchParams] = useSearchParams();
    const query = searchParams.get("q"); // 获取 ?q=test 中的 "test"
  
    const handleSearch = (value) => {
      setSearchParams({ q: value }); // 更新查询参数
    };
  
    return (
      <div>
        <input
          value={query || ""}
          onChange={(e) => handleSearch(e.target.value)}
        />
        <p>搜索: {query}</p>
      </div>
    );
  }
  

• 常见场景：实现搜索框、筛选功能，动态更新 URL 查询参数。

---

5. useRouteError（v6.4+）

• 作用：捕获路由组件抛出的错误（通常与 <Route errorElement> 配合使用）。
• 返回：错误对象（如果有错误发生）。
• 用法：

  import { useRouteError } from "react-router-dom";
  
  function ErrorBoundary() {
    const error = useRouteError();
  
    return (
      <div>
        <h1>出错了</h1>
        <p>{error.message || "未知错误"}</p>
      </div>
    );
  }
  
  // 路由定义
  <Route path="/test" element={<MyComponent />} errorElement={<ErrorBoundary />} />;
  

• 常见场景：处理路由级别的错误（如数据加载失败）。

---

6. useLoaderData（v6.4+，数据加载 API）

• 作用：访问通过 loader 函数返回的数据（需要与 react-router-dom 的数据加载功能配合）。
• 返回：loader 函数返回的数据。
• 用法：

  import { useLoaderData } from "react-router-dom";
  
  function MyComponent() {
    const data = useLoaderData(); // 获取 loader 返回的数据
  
    return <div>数据: {data.message}</div>;
  }
  
  // 路由定义
  export const loader = async () => {
    return { message: "Hello from loader!" };
  };
  <Route path="/test" element={<MyComponent />} loader={loader} />;
  

• 常见场景：在路由渲染前获取数据，替代传统的 useEffect 数据加载。

---

7. useNavigation（v6.4+）

• 作用：提供导航状态信息（如页面是否在加载中）。
• 返回：一个对象，包含 state（"idle"、"submitting"、"loading"）、location 等属性。
• 用法：

  import { useNavigation } from "react-router-dom";
  
  function MyComponent() {
    const navigation = useNavigation();
  
    if (navigation.state === "loading") {
      return <p>加载中...</p>;
    }
  
    return <div>内容已加载</div>;
  }
  

• 常见场景：显示加载指示器，处理导航过渡状态。

---

8. useMatches（v6.4+）

• 作用：获取当前匹配的所有路由信息。
• 返回：一个数组，包含当前匹配的路由对象（包括 id、pathname、data、handle 等）。
• 用法：

  import { useMatches } from "react-router-dom";
  
  function MyComponent() {
    const matches = useMatches();
  
    return (
      <ul>
        {matches.map((match) => (
          <li key={match.id}>{match.pathname}</li>
        ))}
      </ul>
    );
  }
  

• 常见场景：实现面包屑导航，访问多级路由信息。

---

总结

React Router v6 中常用的 Hooks 包括：

1. useNavigate：编程式导航。
2. useLocation：获取当前路由信息。
3. useParams：提取动态路由参数。
4. useSearchParams：管理 URL 查询参数。
5. useRouteError：处理路由错误。
6. useLoaderData：访问路由加载数据。
7. useNavigation：监控导航状态。
8. useMatches：获取当前匹配的路由信息。

常用场景分布

• 基础导航：useNavigate、useLocation、useParams。
• 查询参数管理：useSearchParams。
• 数据加载与错误处理（v6.4+）：useLoaderData、useRouteError、useNavigation。
• 高级路由信息：useMatches。

这些 Hooks 极大地方便了路由管理，尤其在 React 18 的并发特性下，与数据加载 API 配合使用时效果更佳。