javascript - How to perform dynamic component rendering using react router v4? -


i have application login page followed dashboard page. routes i've defined in index.js this:

<router>   <div>     <route exact path="/" component={login}/>     <route path="/dashboard" component={dashboard} />   </div> </router> 

dashboard.js:

return (   <div>     <header/>     <footer/>     <switch>      <route path="/dashboard/content1" component={content1} />      <route path="/dashboard/content2" component={content2} />     </switch>   </div> ); 

the dashboard component rendering 3 of child components. header, footer , content1. want dashboard component render content1 default (i.e. when url /dashboard) , when url /dashboard/content1, , should render content2 when url /dashboard/content2. header & footer components should remain. please suggest configuration dashboard component achieve same.

in react-router v4 provide routes within component, can write routes follows

<router>   <div>     <route exact path="/" component={login}/>     <route path="/dashboard" component={dashboard} />   </div> </router> 

and in dashboard component render method

render() {     return (         <div>             {/* other content */}             <switch>                <route exact path="/dashboard" component={content1} />                <route path="/dashboard/content1" component={content1} />                <route path="/dashboard/content2" component={content2} />             </switch>         </div>      )  } 

Comments

Popular posts from this blog

python - Operations inside variables -

Generic Map Parameter java -

arrays - What causes a java.lang.ArrayIndexOutOfBoundsException and how do I prevent it? -