如果 URL 相同，react router dom history.replace 不会重新渲染组件答案

【问题标题】：react router dom history.replace is not re-render component if same URL如果 URL 相同，react router dom history.replace 不会重新渲染组件
【发布时间】：2020-11-19 10:10:32
【问题描述】：

我已经创建了组件，我在文本框 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)

但是如果您在下面的文本框中更改文本，我的组件将不会重新呈现是我的代码。我有 useEffect 来检测状态变化但不工作。谁能帮帮我

我的完整堆栈是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>
  )
}

【问题讨论】：

标签： javascript reactjs react-hooks react-router-dom

【解决方案1】：

你需要将你的 searchText 添加到 useEffect 中的依赖数组中：

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

并且组件将在 searchText 发生任何变化后重新渲染。

【讨论】：

让我试试这个
在 stackbliz 中工作。将检查我的真实项目
好吧看起来像渲染工作但是当我调用函数时它向我显示最后的内容不是新的可能是什么原因。我已经更新了我的 stackbliz
你的stackbliz现在好像不可用了。
stackbliz 可用。您的建议如何解决我的问题