Noob question but what is the best way

[inland quartz]

create a layout component and use the <Fragment> component to wrap the login page and its components. Here is an example of how this could be implemented:

First, create a Layout component that defines the high-level layout, including the sidenav, header, and footer:

import { Fragment } from 'react';

const Layout = ({ children }) => (
  <Fragment>
    <Sidenav />
    <Header />
    {children}
    <Footer />
  </Fragment>
);```
Next, create a Login component that defines the login page and its components:

const Login = () => (
<Fragment>
<h1>Login</h1>
<form>
<label>
Email:
<input type="email" name="email" />
</label>
<label>
Password:
<input type="password" name="password" />
</label>
<button type="submit">Login</button>
</form>
</Fragment>
);

Finally, wrap the Login component with the Layout component to apply the high-level layout to the login page:

const App = () => (
<Layout>
<Login />
</Layout>
);

lmk if you have any questions! 🙂

[silver estuary]

amazing thank you so much! With this setup, the login page will always have sidenav, header, and footer correct? If I wanted this layout on all other pages but not on the login page would I just opt out of wrapping the login component as a child to the layout component?

[inland quartz]

Yes, with the layout and login page implementation that I provided, the login page will always have the sidenav, header, and footer, because the Layout component is applied to the Login component as a parent.

If you want to use this layout on all other pages but not on the login page, you could opt out of wrapping the Login component as a child to the Layout component. Here is an example of how you could implement this:

const App = () => (
  <>
    <Route path="/login" component={Login} />
    <Route path="/" component={Layout} />
  </>
);```

@silver estuary

also just sent you a dm!