title: Conditional rendering with routing
body: <p>I want to do conditionl rendering with routing - when condition <code>true</code> to replace to <code>SignUp</code> component and to give it a path name for the URL.</p>
  <p>The way it is now it will keep the previous component path name (could be <code>/search</code> for instance)
  <br> How can I do it right ?</p>
  <p>This is how it is right now - but Signup page doesn’t have path name in the url.</p>
  <pre class="lang-js prettyprint-override"><code> return (
      &lt;div &gt;
        {userAccount ? (
              &lt;SignUp /&gt;    
        ) : (
          &lt;&gt;
            &lt;Header
            /&gt;
            &lt;div&gt;
              &lt;Switch&gt;
                &lt;Route exact path='/'&gt;
                  &lt;Home /&gt;
                &lt;/Route&gt;
                &lt;Route exact path='/search'&gt;
                  &lt;Search
                  /&gt;
                &lt;/Route&gt;
                &lt;/Switch&gt;
                 &lt;/div&gt; 
                   &lt;/&gt; )}
                    &lt;/div&gt; );
  </code></pre>
  
  <p><strong>NOT Working</strong> -</p>
  <p>This way it won't show the <code>SignUp</code> page component only blank page <strong>with</strong> the previous path name</p>
  <pre><code>    {userAccount ? (
        &lt;Switch&gt;
        &lt;Route exact path='/signup'&gt;
          &lt;SignUp /&gt;
        &lt;/Route&gt;
      &lt;/Switch&gt; ) :
  </code></pre>