react-router-dom v6,怎么做到替换当前url的query参数?
时间: 2024-02-28 07:52:13 浏览: 37
在 React Router Dom v6 中,我们可以使用 `useNavigate` 钩子来实现替换当前 URL 的 query 参数。具体步骤如下:
1. 导入 `useNavigate` 钩子:
```jsx
import { useNavigate } from 'react-router-dom';
```
2. 在组件中调用 `useNavigate` 钩子,获取 `navigate` 函数:
```jsx
const navigate = useNavigate();
```
3. 调用 `navigate` 函数,传入 `{ replace: true }` 选项,来替换当前 URL 的 query 参数:
```jsx
navigate(`?page=${newPage}`, { replace: true });
```
完整代码示例:
```jsx
import { useNavigate } from 'react-router-dom';
function MyComponent() {
const navigate = useNavigate();
function handlePageChange(newPage) {
navigate(`?page=${newPage}`, { replace: true });
}
return (
// ...
<button onClick={() => handlePageChange(2)}>Go to page 2</button>
// ...
);
}
```
在上面的代码中,当用户点击按钮时,会调用 `handlePageChange` 函数,该函数会通过 `navigate` 函数来替换当前 URL 的 query 参数,从而实现 URL 的更新。需要注意的是,在调用 `navigate` 函数时,需要传入 `{ replace: true }` 选项,来替换当前 URL 而不是添加新的历史记录。