React-Router useParams、useSearchParams用法（路由参数获取）

React-Router useParams、useSearchParams用法（路由参数获取）

1 路由参数和查询参数

路由参数（Route Parameters）和查询参数（Query Parameters）是在Web开发中用于传递数据和配置路由的常见概念。

路由参数（Route Parameters）：

• 路由参数是在URL路径中的一部分，用于标识和区分不同的资源或页面。
• 路由参数通常用于表示具有唯一标识符的实体，如用户ID、产品ID等。
• 路由参数使用冒号（:）来定义，并在URL中使用对应的值来替代。
• 示例：/users/:id，其中:id是路由参数，可以匹配任何具体的用户ID值。

查询参数（Query Parameters）：

• 查询参数是URL中以问号（?）开始的键值对形式的参数。
• 查询参数用于传递附加的数据、过滤条件或配置选项。
• 查询参数可以包含多个键值对，每个键值对由等号（=）连接。
• 多个查询参数之间使用和号（&）分隔。
• 示例：/search?q=react&sort=asc，其中q和sort是查询参数的键，react和asc是对应的值。

路由参数和查询参数在URL中扮演不同的角色：

• 路由参数用于在URL中标识和定位特定的资源或页面。
• 查询参数用于传递额外的数据或配置选项，可以用于过滤、排序、分页等操作。

2 useParams

useParams是React Router提供的一个钩子函数，用于获取当前路由参数的值。它常被用来访问和使用URL中的动态参数。

以下是useParams()的使用方法：

1. 首先，确保你已经安装并引入了react-router-dom库
2. 在需要使用动态参数的组件中，使用useParams()钩子函数
3. 调用useParams()，它会返回一个对象，其中包含URL参数的键值对
4. 使用解构语法从返回的对象中提取所需的参数值

举个例子，假设我们的路由定义如下:

<Route path="/profile/:username" component={UserProfile} />

当用户访问/profile/John时，react会渲染UserProfile组件。

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

const UserProfile = () => {
  const params = useParams();   //params：{ username: 'John' }
  const { username } = params;  //username：'John'

  return (
    <div>
      <h2>User Profile</h2>
      <p>Username: {username}</p>
    </div>
  );
};

export default UserProfile;

在UserProfile组件中，useParams()会返回一个包含{ username: 'John' }的对象，使用对象解构获取username,我们可以将username值显示在组件中。

3 useSearchParams

useSearchParams()也是React Router提供的一个钩子函数，用于获取当前URL查询参数的值。它常被用来访问和操作URL查询参数。

以下是useSearchParams()的使用方法：

1. 首先，确保你已经安装并引入了react-router-dom库
2. 在需要访问查询参数的组件中，使用useSearchParams钩子函数
3. 调用useSearchParams，它会返回一个数组，其中包含两个元素：URL查询参数对象、用于更新URL查询参数的函数
4. 使用解构语法从返回的数组中提取所需查询参数

同样举个例子，假设我们的URL为/search?q=react，我们需要在组件中使用查询参数q的值，获取q值的代码如下：

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

const SearchResults = () => {
  const [searchParams] = useSearchParams();
  const query = searchParams.get('q');

  return (
    <div>
      <h2>Search Results</h2>
      <p>Query: {query}</p>
    </div>
  );
};

export default SearchResults;

useSearchParams()将返回一个数组，其中第一个元素是包含{ q: 'react' }的对象。然后，我们使用searchParams.get('q')来获取名为q的查询参数的值。