# 路由传参（params、query）

URL: https://caijiao.org/react/chapter8/route-params
Source: docs/react/chapter8/route-params.md
Description: React Router 提供了两种主要的路由传参方式：路径参数（params）和查询参数（query）。路径参数通常用于动态匹配 URL 中的一部分，而查询参数则用于传递更灵活的数据。了解如何使用这两种方式是构建动态路由的基础。

## 路由参数（params）

路径参数（params）是 React Router 提供的一种通过 URL 路径传递数据的方式。您可以在 `Route` 中定义动态路径，然后通过 `useParams` 钩子访问这些参数。

### 示例

首先，定义一个带有动态路径的路由：

```jsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { UserProfile } from './UserProfile';

function App() {
  return (
    
  );
}
````

在这个示例中，`:id` 就是一个动态的路径参数。当用户访问 `/user/123` 时，`123` 会被传递到目标组件 `UserProfile` 中。

在组件内部，您可以使用 `useParams` 钩子来访问这个参数：

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

function UserProfile() {
  const { id } = useParams();
  return <div>User ID: {id}</div>;
}
```

此时，当路径是 `/user/123` 时，`id` 的值就是 `123`。

## 查询参数（query）

查询参数（query）通过 URL 的查询字符串传递数据。查询字符串以 `?` 开头，多个参数通过 `&` 分隔。您可以使用 `useLocation` 钩子来访问查询参数。

### 示例

假设您有一个 URL 如下：

```
/search?query=react&page=1
```

您可以在 `Route` 中设置路径为 `/search`，并使用 `useLocation` 钩子获取查询参数：

```jsx
import { useLocation } from 'react-router-dom';

function SearchPage() {
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);
  const query = queryParams.get('query');
  const page = queryParams.get('page');
  
  return (
    <div>
      <h2>Search Results</h2>
      <p>Query: {query}</p>
      <p>Page: {page}</p>
    </div>
  );
}
```

### 总结

* **路径参数（params）** 是 URL 路径的一部分，通常用于动态匹配和传递重要的标识符。
* **查询参数（query）** 是通过 URL 查询字符串传递的额外信息，通常用于过滤或分页等场景。

这两种方式可以根据应用的需求灵活地组合使用，实现更复杂的路由传参。