title: how to keep a set state after redirecting to outside website, then redirecting back to react app
body: <p>I'm new to react and am building an app which can connect to one of two APIs.  These API's each use the "authorization code" flow, which redirects the user to an identity server, the user logs into the identity server and allows my react app to access their data stored in a database, and the user is then redirected back to my app.</p>
  
  <p>So my app has a home page with 2 buttons, button1 and button2. I'm using the home page state to store the value of which button was clicked and which one of the APIs the user wants to use - eg: if button1 was clicked: <code>this.setState({page1: true, page2: false})</code></p>
  
  <p>Then the user is redirected to the identity server: <code>window.location = "https://identityserverurl"</code></p>
  
  <p>The user logs in to the identity server website, clicks "Allow" and is then redirected back to my app.  What should happen then is based on the state set just before the redirect to the identity server, a different component is displayed instead of the home page - (im using a conditional statement for that).  </p>
  
  <p>The problem is when the user is redirected back to my app from the APIs identity server, it loads the home page instead of one of the other pages because the state is being reset to its initial value when the identity server redirect the user back to my app.</p>
  
  <p>I need to find a way to prevent the state from being reset back to the initial value when the identity server redirect back to my app. I'm not sure how to handle this.  </p>
  
  <p>Here is my code for reference.</p>
  
  <p>Main.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import Home from './Home.js';
  import Page1 from './Page1.js';
  import Page2 from './Page2.js'
  
  class Main extends Component {
      constructor(props) {
        super(props);
        this.state = {page1: false, page2: false};
        this.handleClick = this.handleClick.bind(this);
      }
  
      hanldeRedirect() {
        window.location = "https://identityserverurl.com";
      }
  
      handleClick(arg) {
        if(arg === "page1") {
          this.setState({page1: true, page2: false});
          this.hanldeRedirect();
        }
        if(arg === "page2") {
          this.setState({page1: false, page2: true});
          this.hanldeRedirect();
        }
        if(arg === "home"){
          this.setState({page1: false, page2: false})
        }
      }
  
      render() {
        const isPage1 = this.state.page1;
        const isPage2 = this.state.page2;
        if(!isPage1 &amp;&amp; !isPage2) {
          return(&lt;Home onPage1Event={() =&gt; this.handleClick("page1")} page1Value="page1" onPage2Event={() =&gt; this.handleClick("page2")} page2Value="page2" /&gt;)
        }
        else {
          if(isPage1) {
            return(&lt;Page1 /&gt;)
          }
          else {
            return(&lt;Page2 /&gt;)
          }
        }
      }
    }
  
    export default Main;
  </code></pre>
  
  <p>Home.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import Button from './Button.js';
  
  class Home extends Component {
      render() {
        return(
          &lt;div&gt;
            &lt;Button onEvent={(event)=&gt; this.props.onPage1Event(event)} btnValue={this.props.page1Value}&gt;{this.props.page1Value}&lt;/Button&gt;
            &lt;br/&gt;
            &lt;Button onEvent={(event)=&gt; this.props.onPage2Event(event)} btnValue={this.props.page2Value}&gt;{this.props.page2Value}&lt;/Button&gt;
          &lt;/div&gt;
        )
      }
    }
  
    export default Home;
  </code></pre>
  
  <p>Page1.js</p>
  
  <pre><code>import React from 'react';
  
  const Page1 = () =&gt; {
      return(
          &lt;div&gt;
              &lt;h1&gt;Page1&lt;/h1&gt;
          &lt;/div&gt;
      )
  }
  
  export default Page1;
  </code></pre>
  
  <p>Page2.js</p>
  
  <pre><code>import React from 'react';
  
  const Page2 = () =&gt; {
      return(
          &lt;div&gt;
              &lt;h1&gt;Page2&lt;/h1&gt;
          &lt;/div&gt;
      )
  }
  
  export default Page2;
  </code></pre>
  
  <p>Button.js</p>
  
  <pre><code>import React, { Component } from 'react';
  
  class Button extends Component {
      render() {
        return(
          &lt;button onClick={() =&gt; this.props.onEvent()} value={this.props.btnValue}&gt;{this.props.btnValue}&lt;/button&gt;
        )
      }
    }
  
    export default Button
  </code></pre>