Login page without header/footer bars

Question

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.

Answer 1

First of all, try to write code for pure components without using a class:

It will be your App.js

const App = ({ children }) => (
  <main>
    {children}
  </main>
);

export default App;

It will be your Layout.js

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

export default Layout;

It will be your Login.js

const Login = () => (
  <Layout type="no-wrap">
    Login
  </Layout>
);

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 }) => (
  <div>
    <Header />
      {children}
    <Footer />
  </div>
);

export default Layout;

LayoutNoWrap.js

const LayoutNoWrap = ({ children }) => (
  <div className="test1">
    {children}
  </div>
);

export default LayoutNoWrap;

Login.js

const Login = () => (
  <LayoutNoWrap>
    Login
  </LayoutNoWrap>
);

export default Login;