如何使用反应钩子删除查询参数?

Question

我知道我们可以替换基于组件的类中的查询参数，执行以下操作：

componentDidMount() {       
const { location, replace } = this.props;   
const queryParams = new URLSearchParams(location.search);   
if (queryParams.has('error')) { 
this.setError(    
'There was a problem.'  
);    
queryParams.delete('error');  
replace({ 
search: queryParams.toString(), 
});   
}   
}

有没有办法在功能组件中使用反应钩子来做到这一点？

Answer 1

对于 React Router V6 及更高版本，请参阅下面的答案。

<小时 />

原答案：

是的，你可以使用 react-router 的useHistory&useLocation钩子：

import React, { useState, useEffect } from 'react'
import { useHistory, useLocation } from 'react-router-dom'
export default function Foo() {
const [error, setError] = useState('')
const location = useLocation()
const history = useHistory()
useEffect(() => {
const queryParams = new URLSearchParams(location.search)

if (queryParams.has('error')) {
setError('There was a problem.')
queryParams.delete('error')
history.replace({
search: queryParams.toString(),
})
}
}, [])
return (
<>Component</>
)
}

AsuseHistory()返回具有replace函数的历史对象，该函数可用于替换历史堆栈上的当前条目。

useLocation()返回位置对象，该对象具有包含 URL 查询字符串search属性，例如?error=occurred&foo=bar"可以使用URLSearchParams API转换为对象(IE不支持(。

Answer 2

使用useSearchParams钩子。

import {useSearchParams} from 'react-router-dom';
export const App =() => {
const [searchParams, setSearchParams] = useSearchParams();
const removeErrorParam = () => {
if (searchParams.has('error')) {
searchParams.delete('error');
setSearchParams(searchParams);
}
}
return <button onClick={removeErrorParam}>Remove error param</button>
}