title: How to avoid state data from being shown after refresh?
body: <p>I have 2 components, A and B.</p>
  <ul>
  <li><p>In component B, I am getting a value from an API request that I am sending to component A on click of a button present in B.</p>
  </li>
  <li><p>In component B:</p>
  <pre><code>axios.get('&lt;api url&gt;').then(res =&gt; {
    this.props.navigate('/', { data: res.data.successMsg })
  }) 
  </code></pre>
  </li>
  </ul>
  <p>So on click of button in B, if the API works properly, I will be redirected to component A, and I can use this <code>successMsg</code> to show an alert with success message. Till here it is fine.</p>
  <p>Now When I refresh this page, it again shows the success message. I use the useLocation hook in component A to check for the state:</p>
  <pre><code>import { useLocation } form 'react-router-dom';
  
  export function A(){
    const [showAlert, setShowAlert] = useState(false)
    const location1 = useLocation();
  
    useEffect(() =&gt; {
      if (location1.state !== null) {
        setShowAlert(true)
        window.setTimeout(() =&gt; {
          location1.state = null
        }, 8000)
      }
    }, [])
  }
  
  export default B
  </code></pre>
  <p>This <code>if</code> statement also work every time I refresh the page, so it makes no difference and renders the success message on every reload, which I don't want. I just want the success alert to show after redirection, ie button click.
  How do I differentiate between refresh and redirect so that I can stop the message on refresh? or if there is some of other option/idea, please let me know.
  Note: I already tried the <code>performance</code> option, but on both redirect and refresh, it showed me the 'reload' option only.</p>