title: How to reset location state in react router
body: <p>I am following react-router docs to create a protected route HOC and for unauthenticated requests I am Redirecting the user as following :</p>
  
  <pre><code>&lt;Redirect to={{
    pathname: '/input-number',
    state: { from: props.location },
  }} /&gt;
  </code></pre>
  
  <p>Now on the redirected component, I show an error message using the following logic :</p>
  
  <pre><code>      this.props.location.state &amp;&amp; this.props.location.state.from &amp;&amp;
        (
          &lt;Grid.Row&gt;
            &lt;Grid.Column&gt;
              &lt;Message negative&gt;
                &lt;Message.Header&gt;You must be logged in to visit the page&lt;/Message.Header&gt;
              &lt;/Message&gt;
            &lt;/Grid.Column&gt;
          &lt;/Grid.Row&gt;
        )
  </code></pre>
  
  <p>The problem is when the user reloads, the page the state associated with the location is not cleared and the error message is shown on each refresh once user has been redirected to the login component. I am looking for a way to clear the state. I think it must be possible without setting some app state.</p>
  
  <p><strong>UPDATE :</strong> I am adding the complete PrivateRoute for clarity:</p>
  
  <p>`</p>
  
  <pre><code>export default function PrivateRoute({ component: Component, ...rest }) {
    const isAuthenticated = localStorage.getItem(ACCESS_TOKEN);
    return (
      &lt;Route
        {...rest}
        render={props =&gt; (
          isAuthenticated ? (
            &lt;Component {...props} /&gt;
          ) : (
            &lt;Redirect to={{
              pathname: '/input-number',
              state: { from: props.location },
            }}
            /&gt;
          )
        )}
      /&gt;);
  }
  </code></pre>
  
  <p>`</p>