title: Render different component depending on route
body: <p>What I'm trying to achieve is to render different content surrounding view depending upon the routing url. I'm using <code>react-router</code>.</p>
  
  <pre><code>const App = React.createClass({
    render() {
      return ( 
        &lt;div&gt; //this is when Login component
            {this.props.children}
  
             //something like this when it is any page except login
            &lt;Sidebar /&gt;
            {this.props.children}
        &lt;/div&gt;
      )
    }
  })
  
  ReactDOM.render(
          &lt;Router history={createBrowserHistory()}&gt;
            &lt;Route path="/" component={App}&gt;
              &lt;IndexRoute component={Login} /&gt;
              &lt;Route path="login" component={Login} /&gt;
              &lt;Route path="publisher-list" component={PublisherList}/&gt;
                &lt;Route path="/edit-publisher/:id" component={EditPublisher}/&gt;
              &lt;Route path="add-publisher" component={AddPublisher}/&gt;
              &lt;Route path="add-professional" component={AddProfessional}/&gt;
            &lt;/Route&gt;
          &lt;/Router&gt;
    , document.getElementById('app'));
  </code></pre>
  
  <p>My problem is how to hide sidebar when it is a login page and show sidebar on rest pages. How can I do this...?</p>
  
  <p>*I haven't included the imports, assume all imports are included.</p>
  
  <p>Consider this as an example of an admin portal side. First thing thing that you want to see is a login page. So no sidebar or navbar is needed. But once he logs in all view must contain sidebar and navbar by default..So <code>www.admin.com/</code> or <code>www.admin.com/login</code> should be login page and the rest URLs..like <code>www.admin.com/publisher-list</code> or <code>www.admin.com/professional</code> etc should have the navbar and sidebar.</p>