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
Post a Comment