Login page without header/footer bars
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;