Login page without header/footer bars 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 (
  &lt;Router history={hashHistory}&gt;
    &lt;Route path="/" component={App}&gt;

      &lt;Route path="login" component={Login} /&gt;

      &lt;Route path="*" component={NotFoundPage} /&gt;

    &lt;/Route&gt;
  &lt;/Router&gt;
);


Here's my main app trigger that initializes and renders everything:

class App extends React.Component {


  render() {
    return (
      &lt;main&gt;

        {this.props.children}

      &lt;/main&gt;
    );
  }

}


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(
            &lt;div&gt;
            &lt;Header /&gt;

                {this.props.children}

            &lt;Footer /&gt;
            &lt;/div&gt;
          );
    } else {
        return(
            &lt;div className="test1"&gt;
            {this.props.children}

            &lt;/div&gt;

          );

    }
  }

  render() {
    return(
      &lt;div&gt;
        { this.renderPageLayout() }
      &lt;/div&gt;
      );
  }

}


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 (
      &lt;Layout type="no-wrap"&gt;

        Login

      &lt;/Layout&gt;
    );
  }

}

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.
First of all, try to write code for pure components without using a class:

It will be your App.js

const App = ({ children }) =&gt; (
  &lt;main&gt;
    {children}
  &lt;/main&gt;
);

export default App;


It will be your Layout.js

const Layout = ({ children, type }) =&gt; (
  &lt;div&gt;
    type == 'wrap' ? (
      &lt;div&gt;
        &lt;Header /&gt;
          {children}
        &lt;Footer /&gt;
      &lt;/div&gt;
    ) : (
       &lt;div className="test1"&gt;
         {children}
       &lt;/div&gt;
    )
  &lt;/div&gt;
);

export default Layout;


It will be your Login.js

const Login = () =&gt; (
  &lt;Layout type="no-wrap"&gt;
    Login
  &lt;/Layout&gt;
);

export default Login;


If you don't need to use a Layout component inside the Login component, just don't do it.

For example:

Layout.js

const Layout = ({ children }) =&gt; (
  &lt;div&gt;
    &lt;Header /&gt;
      {children}
    &lt;Footer /&gt;
  &lt;/div&gt;
);

export default Layout;


LayoutNoWrap.js

const LayoutNoWrap = ({ children }) =&gt; (
  &lt;div className="test1"&gt;
    {children}
  &lt;/div&gt;
);

export default LayoutNoWrap;


Login.js

const Login = () =&gt; (
  &lt;LayoutNoWrap&gt;
    Login
  &lt;/LayoutNoWrap&gt;
);

export default Login;