react router dom history.replace不会重新呈现相同URL的组件

Question

我已经创建了一个组件，在文本框keydown中，我将重定向到如下

const Search = (props) => {
const searchKeyDown = (e) => {
if(e.key === 'Enter'){
if(e.target.value){
props.history.replace(`/search/${e.target.value}`)
} else {
alert('Search cannot be empty')
}
}
}
return (
<React.Fragment>
Search <input type='text' placeholder='Search...' onKeyDown={(e) => {searchKeyDown(e)}}/>
</React.Fragment>
)
}
export default withRouter(Search)

但如果您更改下面的文本框中的文本，我的组件将不会重新呈现。这是我的代码。我使用Effect来检测状态变化，但不起作用。有人能帮我吗

我的完整堆栈是https://stackblitz.com/edit/react-ts-k71agk?file=index.tsx

const SearchData = (props:any) =>{
const searchText = props.match.params.searchText
const [searchParams, setSearchParams] = useState(null)
useEffect(()=>{
setSearchParams(searchText)
},[])
useEffect(()=>{
if(searchParams !== null) console.log(searchParams)
},[searchParams])
return (
<React.Fragment>
{searchParams}
</React.Fragment>
)
}

Answer 1

您需要将searchText添加到useEffect:中的依赖数组中

useEffect(()=>{
setSearchParams(searchText)
},[searchText])

组件将在searchText发生任何更改后重新呈现。