我知道我们可以替换基于组件的类中的查询参数，执行以下操作：
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(),
});
}
}
有没有办法在功能组件中使用react-hooks来做到这一点？
是的，您可以使用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()返回位置对象，该对象具有search包含 URL 查询字符串的属性，例如?error=occurred&foo=bar"可以使用URLSearchParams API（IE 不支持）将其转换为对象。