gpt4 book ai didi

reactjs - 如何使用 react Hook 删除查询参数?

转载 作者:行者123 更新时间:2023-12-03 13:45:35 26 4
gpt4 key购买 nike

我知道我们可以按照以下方式替换基于组件的类中的查询参数:

  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 钩子(Hook)来做到这一点?

最佳答案

是的,您可以使用 useHistory & useLocation 来自 react-router 的钩子(Hook):


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</>
)
}

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

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

关于reactjs - 如何使用 react Hook 删除查询参数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62032050/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com