title: react router dom history.replace is not re-render component if same URL
body: <p>I have created component where on text box keydown I am redirecting as below</p>
  <pre><code>const Search = (props) =&gt; {
  
    const searchKeyDown = (e) =&gt; {
      if(e.key === 'Enter'){
        if(e.target.value){
          props.history.replace(`/search/${e.target.value}`)
        } else {
          alert('Search cannot be empty')
        }
      }
    }
    return (
      &lt;React.Fragment&gt;
        Search &lt;input type='text' placeholder='Search...' onKeyDown={(e) =&gt; {searchKeyDown(e)}}/&gt;
      &lt;/React.Fragment&gt;
    )
  }
  
  export default withRouter(Search)
  </code></pre>
  <p>But my component will not re-render if you change text in textbox below is my code. I have useEffect to detect state change but not working. Can somebody help me</p>
  <p>My full stackbliz is <a href="https://stackblitz.com/edit/react-ts-k71agk?file=index.tsx" rel="nofollow noreferrer">https://stackblitz.com/edit/react-ts-k71agk?file=index.tsx</a></p>
  <pre><code>const SearchData = (props:any) =&gt;{
    const searchText = props.match.params.searchText
    const [searchParams, setSearchParams] = useState(null)
  
    useEffect(()=&gt;{
      setSearchParams(searchText)
    },[])
  
    useEffect(()=&gt;{
      if(searchParams !== null) console.log(searchParams)
    },[searchParams])
  
    return (
      &lt;React.Fragment&gt;
        {searchParams}
      &lt;/React.Fragment&gt;
    )
  }
  </code></pre>