那怎么保留当前的query参数,只替换其中的某一个query参数?
时间: 2023-11-04 16:04:19 浏览: 29
要保留当前的 query 参数,只替换其中的某一个 query 参数,可以使用 `URLSearchParams` 对象来实现。
具体步骤如下:
1. 导入 `useLocation` 钩子:
```jsx
import { useLocation } from 'react-router-dom';
```
2. 在组件中调用 `useLocation` 钩子,获取当前 URL 的 query 参数:
```jsx
const location = useLocation();
const searchParams = new URLSearchParams(location.search);
```
3. 使用 `set` 方法,来替换某一个 query 参数:
```jsx
searchParams.set('page', newPage);
```
4. 将修改后的 query 参数,拼接到当前 URL 的路径中:
```jsx
const newPath = `${location.pathname}?${searchParams.toString()}`;
```
5. 使用 `useNavigate` 钩子,来替换当前 URL:
```jsx
const navigate = useNavigate();
navigate(newPath, { replace: true });
```
完整代码示例:
```jsx
import { useLocation, useNavigate } from 'react-router-dom';
function MyComponent() {
const location = useLocation();
const navigate = useNavigate();
function handlePageChange(newPage) {
const searchParams = new URLSearchParams(location.search);
searchParams.set('page', newPage);
const newPath = `${location.pathname}?${searchParams.toString()}`;
navigate(newPath, { replace: true });
}
return (
// ...
<button onClick={() => handlePageChange(2)}>Go to page 2</button>
// ...
);
}
```
在上面的代码中,当用户点击按钮时,会调用 `handlePageChange` 函数,该函数会通过 `URLSearchParams` 对象来操作当前 URL 的 query 参数,从而实现只替换其中的某一个 query 参数。需要注意的是,在调用 `navigate` 函数时,需要传入 `{ replace: true }` 选项,来替换当前 URL 而不是添加新的历史记录。