React 19 Router 钩子详解：高效管理 URL 和页面导航

概要

以下是 React Router 提供的实用钩子函数的总结。它们被设计用于简化与 URL 相关的操作和状态管理。

1. useLocation

概要：获取当前 URL 的信息（路径、查询参数、哈希、状态等）。

主要用途：

• 实现基于当前路径或查询参数的逻辑。
• 获取链接或跳转来源的信息（如 state 数据）。

返回值的主要属性：

• pathname：当前路径（例如：/home）。
• search：查询参数部分（例如：?id=123）。
• hash：哈希部分（例如：#section1）。
• state：页面跳转时传递的自定义数据。

示例：

const location = useLocation();
console.log(location.pathname); // 输出 '/about'

2. useNavigate

概要：用于以编程方式进行页面跳转的钩子。

主要用途：

• 基于按钮点击或事件触发页面跳转。
• 根据条件实现页面重定向。

主要功能：

• navigate('/path')：跳转到指定路径。
• navigate(-1)：返回上一页。
• navigate('/path', { replace: true })：替换历史记录（不能通过返回按钮回退）。

示例：

const navigate = useNavigate();
navigate('/profile'); // 跳转到 '/profile'

3. useParams

概要：获取动态路由中的参数。

主要用途：

• 从动态 URL（如：/user/:id）中提取参数。
• 用于处理动态数据的页面。

返回值：包含 URL 参数的键值对对象。

示例：

const { id } = useParams();
console.log(id); // 例如输出 '123'

4. useSearchParams

概要：用于获取和更新查询参数（?key=value）的钩子。

主要用途：

• 获取 URL 查询参数并基于此进行逻辑处理。
• 添加或更新查询参数。

主要功能：

• searchParams.get('key')：获取查询参数。
• setSearchParams({ key: 'value' })：更新查询参数。

示例：

const [searchParams, setSearchParams] = useSearchParams();
console.log(searchParams.get('id')); // 输出 '123'
setSearchParams({ page: '2' }); // 设置查询参数为 ?page=2

5. useMatch

概要：检查当前 URL 是否与指定路径匹配，并获取匹配信息。

主要用途：

• 条件渲染：当路径匹配时渲染特定内容。
• 动态执行与路径匹配相关的操作。

返回值：

• 如果匹配，返回包含 params（动态参数）、pathname 等信息的对象。
• 如果不匹配，返回 null。

示例：

const match = useMatch('/user/:id');
if (match) {
  console.log(match.params.id); // 输出 '123'
}

各钩子对比

不同场景下的选择

1. 需要获取当前 URL 信息时： → 使用 useLocation
2. 需要通过代码控制页面跳转时： → 使用 useNavigate
3. 需要获取动态 URL 中的参数时： → 使用 useParams
4. 需要获取或更新查询参数时： → 使用 useSearchParams
5. 需要检查 URL 是否匹配特定路径时： → 使用 useMatch

总结

React Router 的这些钩子函数为 URL 操作和状态管理提供了直观且高效的工具。根据特定的用例选择合适的钩子，并将它们结合使用，可以轻松实现复杂的路由和导航逻辑。