I'm creating an app where the login page doesn't have the header/footer bars that the pages, after being logged in, would have.  I've created an example that works, but I'm unsure if I am using the prop/component inheritance or patterns correctly.I feel like there is a lot of nesting going on here, but I'm unsure if that's the proper thing to experience or if I'm creating a mess for myself.Here's my main Router:export default (  <Router history={hashHistory}>    <Route path=/ component={App}>      <Route path=login component={Login} />      <Route path=* component={NotFoundPage} />    </Route>  </Router>);Here's my main app trigger that initializes and renders everything:class App extends React.Component {  render() {    return (      <main>        {this.props.children}      </main>    );  }}export default App;Then, I created a Layout component to serve either a version with or without the header and footer:class Layout extends React.Component {  constructor(props) {    super(props);  }  renderPageLayout() {    if(this.props.type == 'wrap') {        return(            <div>            <Header />                {this.props.children}            <Footer />            </div>          );    } else {        return(            <div className=test1>            {this.props.children}            </div>          );    }  }  render() {    return(      <div>        { this.renderPageLayout() }      </div>      );  }}export default Layout;And my login page should not have a header/footer on it, so it is as follows:class Login extends React.Component {  constructor(props) {    super(props);  }  render() {    return (      <Layout type=no-wrap>        Login      </Layout>    );  }}export default Login;I'm having trouble finding examples of similar things that are on a basic level and don't contain a bunch of ReactJS things that I haven't yet learned.
Login page without header/footer bars
javascript;react.js;user interface;layout;jsx