reactjs - Render different component depending on route -

what i'm trying achieve render different content surrounding view depending upon routing url. i'm using react-router.

const app = react.createclass({   render() {     return (        <div> //this when login component           {this.props.children}             //something when page except login           <sidebar />           {this.props.children}       </div>     )   } })  reactdom.render(         <router history={createbrowserhistory()}>           <route path="/" component={app}>             <indexroute component={login} />             <route path="login" component={login} />             <route path="publisher-list" component={publisherlist}/>               <route path="/edit-publisher/:id" component={editpublisher}/>             <route path="add-publisher" component={addpublisher}/>             <route path="add-professional" component={addprofessional}/>           </route>         </router>   , document.getelementbyid('app')); 

my problem how hide sidebar when login page , show sidebar on rest pages. how can this...?

*i haven't included imports, assume imports included.

consider example of admin portal side. first thing thing want see login page. no sidebar or navbar needed. once logs in view must contain sidebar , navbar default..so www.admin.com/ or www.admin.com/login should login page , rest urls..like www.admin.com/publisher-list or www.admin.com/professional etc should have navbar , sidebar.

what this?

function requireauth(nextstate, replacestate) {     if (typeof window !== 'undefined') {         if (!localstorage.jwt) {             replacestate({nextpathname: nextstate.location.pathname}, '/login');         }     } }  function disallowlogin(nextstate, replacestate) {     if (typeof window !== 'undefined') {         if (localstorage.jwt) {             replacestate({nextpathname: nextstate.location.pathname}, '/');         }     } }  export default (     <route>         <route path="login" component={login} onenter={disallowlogin}/>         <route path="/" component={app} onenter={requireauth}>           routes here                     </route>     </route> ); 

so basically:

whenever visits page, gets redirected login unless has jwt in localstorage. if authenticated proceed admin app.

the other way around

var children = react.children.map(this.props.children, (child) => {                 return react.cloneelement(child, {isauthenticated: true/false}); }) 

and have in every children render or not depending on result of isauthenticated props. though sidebar need childrne then.

the last case different rendering in sidebar only, depending on case if logged in or not

render() {     if(this.props.isauthenticated){        return <sidebar />     } else {        return <div/> } 

also if storing logged person token somewhere in browser (i.e. localstorage) check if has token on there (which mean logged in) , display above though instead of isauthenticated have different case