React Router 6 入门指南：使用useParams、useSearchParams、useLocation和编程式路由导航

2023-07-02 14:51:51

React Router 6 高级导航：useParams、useSearchParams、useLocation 和 useNavigate

了解 React Router 6 的高级导航 API

React Router 6 引入了强大的 API，使开发者能够轻松处理路由和导航。本博客将深入探讨四个关键 API：useParams、useSearchParams、useLocation 和 useNavigate。通过理解这些 API，你可以增强 React 应用程序的导航功能。

useParams：获取路由参数

useParams API 让你可以访问路由中定义的参数。例如，如果你的路由包含 /users/:id 模式，则你可以使用 useParams 提取 id 参数。这在动态获取数据或自定义 URL 路径时非常有用。

import { useParams } from "react-router-dom";

function UserPage() {
  const { id } = useParams();

  // 使用 id 来获取用户数据或渲染特定用户页面
}

useSearchParams：访问查询参数

useSearchParams API 让你可以访问 URL 查询字符串中的参数。例如，如果你有一个包含 ?sort=name&order=asc 查询字符串的 URL，则可以使用 useSearchParams 提取 sort 和 order 参数。这在处理过滤、排序和分页等用户请求时很有用。

import { useSearchParams } from "react-router-dom";

function UserListPage() {
  const [searchParams] = useSearchParams();

  const sort = searchParams.get("sort");
  const order = searchParams.get("order");

  // 使用 sort 和 order 来过滤和排序用户列表
}

useLocation：获取当前位置对象

useLocation API 让你可以访问当前位置对象，其中包含有关当前 URL 的信息，例如路径名、查询字符串和哈希。这在获取有关当前页面的上下文或确定用户导航路径时很有用。

import { useLocation } from "react-router-dom";

function MyComponent() {
  const location = useLocation();

  // 获取当前路径名、查询字符串或哈希
}

useNavigate：进行编程导航

useNavigate API 让你可以在应用程序中编程方式地导航到不同的路由。这在用户点击按钮或链接时触发导航时非常有用。

import { useNavigate } from "react-router-dom";

function MyComponent() {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate("/users"); // 导航到 users 路由
  };
}

总结

useParams、useSearchParams、useLocation 和 useNavigate API 是 React Router 6 中功能强大的工具，可增强你的应用程序的导航功能。通过理解和利用这些 API，你可以动态获取路由参数、访问查询参数、获取当前位置信息并进行编程导航，从而为用户提供无缝且交互式的体验。

常见问题解答