1
\$\begingroup\$

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.

\$\endgroup\$
2
\$\begingroup\$

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;
| improve this answer | |
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.