reactjs - react nested Route issue -


i have following code -

import react, {component} 'react'; import mainbar './mainbar'; import home './home'; import {router, route, redirect, link} 'react-router'   class main extends component {      render() {          return (             <div classname="container-home">                     <mainbar/>                 <route path='/main/home' component={home}/>             </div>         )     } }  export default main; 

the main routering inside app.js file -

   render() {         return (             <browserrouter>                 {(this.state.loggedin) ?                     <switch>                         <route path="/main" component={main}/>                         <route path="/login" component={login}/>                         <route path="/register" component={register}/>                         <redirect exact from="*" to="/main"/>                     </switch>                     :                     <switch>                         <route path="/login" component={login}/>                         <route path="/register" component={register}/>                         {/*comment on next line !!*/}                         <route path="/main" component={main}/>                         <redirect exact from="*" to="/login"/>                     </switch>                 }             </browserrouter>         )     } } 

when user enters '/main' url can view component. reason when typing '/main/home' nested components still unavailable. problem way wrote url?


Comments

Popular posts from this blog

ubuntu - PHP script to find files of certain extensions in a directory, returns populated array when run in browser, but empty array when run from terminal -

php - How can i create a user dashboard -

javascript - How to detect toggling of the fullscreen-toolbar in jQuery Mobile? -