title: ReactJS How do you switch between pages in React?
body: <p>So coming from an Angular/AngularJS background, you have states, and each state is a separate page. E.g. in a social network you can have a state with your feed, a state with a list of your friends, or a state to see a profile etc. Pretty straightforward. Not so much in React for me.</p>
  
  <p>So let's say I have an application with 2 pages: a list of products and a single product view. What would be the best way to switch between them? </p>
  
  <p>The simplest solution is to have an <em>object</em> which has a <em>stateName</em> and is a <em>boolean</em></p>
  
  <pre><code>constructor() {
    super();
  
    this.state = {
      productList: true,
      productView: false
    }
  }
  </code></pre>
  
  <p>And then have something like that in your <em>render()</em> function </p>
  
  <pre><code>return() {
    &lt;div className="App"&gt;
      // Or you could use an if statement
      { this.state.productList &amp;&amp; &lt;ProductList /&gt; }
      { this.state.productView &amp;&amp; &lt;ProductView product={this.state.product} /&gt; }
    &lt;/div&gt;
  }
  </code></pre>
  
  <p>Pretty straightforward, right? Sure, for a 2 page application that is.</p>
  
  <p>But what if you have a large app with <em>10</em>, <em>20</em>, <em>100</em> pages? The <em>return()</em> part of the render would be a mess, and it would be madness to track the status of every state.</p>
  
  <p>I believe there should be a better way to organize your app. I tried googling around but I couldn't find anything useful (except for using <em>if else</em> or <em>conditional operators</em>).</p>