Multiple Layout In React Router
Tags: react, router, layout, routes
Published: 2021-03-01 09:00:32

I have come across several scenarios where I needed to create views/pages that had different layout structures in real-time applications like real estate, eCommerce. Recently I had the opportunity to create a multi-layout application and just want to share it.

#### Initial setup
Create a simple React app that changes depending on the current route:

```javascript
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import Router from "components/router";

const MyApp = props => (
  <BrowserRouter>
      <Router />
  </BrowserRouter>
);

ReactDOM.render(<MyApp />, document.getElementById("app"));
```javascript
The **<Router>** component defines all the possible routes of our app and their corresponding components:

```javascript
import React from "react";
import { Route, Switch, Redirect } from "react-router-dom";
import { LoginPage, UserDetailsPage } from "pages";

const Router = () => (
  <Switch>
    <Redirect from="/" to="/layout1"/>
    <Route path="/layout1" component={LoginPage} />
    <Route path="/layout2" component={UserDetailsPage} />
  </Switch>
);

export default Router;
```
Next step, Create two different layout files(DashboardLayout.js, LoginLayoutRoute.js ) and their respective routes to implement multiple layouts.

LoginLayoutRoute.js
```javascript
import React from 'react';  
import { Route } from 'react-router-dom';  
  
const LoginLayout = ({ children }) => (                         
    <div>  
      {children}                                       
    </div>  
  );  
  
  const LoginLayoutRoute = ({component: Component, ...rest}) => {  
    return (  
      <Route {...rest} render={props => (  
        <LoginLayout>  
            <Component {...props} />  
        </LoginLayout>  
      )} />  
    )  
  };  
  
export default LoginLayoutRoute;  
```
DashboardLayout.js
```javascript
import { Route } from 'react-router-dom';

const DashboardLayout = ({ children, ...rest }) => {
  return (
    <div className='page page-dashboard'>
      <header>
        <h1>Dashboard</h1>
        <p>The agent dashboard has 3 parts, a side menu, a top bar and content area to render components.</p>
      </header>
      <section>
        <nav>
          <p>
            DashboardLayout.js contains a higher order component (HOC) that
            takes a component as a prop and passes it into a `Route` from
            react-router-dom.
          </p>
          <p>
            The specific path for the component being passed to the HOC is
            passed to the Route in the spread ...rest .
          </p>
        </nav>
        <article>{children}</article>
      </section>
      <footer>
        <p>Footer</p>
      </footer>
    </div>
  );
};

const DashboardLayoutRoute = ({ component: Component, ...rest }) => {
  return (
    <Route
      {...rest}
      render={(props) => (
        <DashboardLayout>
          <Component {...props} />
        </DashboardLayout>
      )}
    />
  );
};

export default DashboardLayoutRoute;

```
Both Login & Dashboard Layout contains a higher-order component (HOC) that takes a component as a prop and passes it into a `Route` from react-router-dom. The specific path for the component being passed to the HOC is passed to the Route in the spread ...rest.

A child component will be rendered at {children} and the rest of the elements will remain the same for all the child components that are using this layout.

As we can see here, by changing the route, different master pages are rendered for different components in DOM.

**Layout 1:**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3jeoe49iv2r4a28h33da.png)
**Layout 2:**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v7v6s0wyr7dy06ulo025.png)

The finished code can be found on [github](https://github.com/selvaece25/react-all-in-one).

Happy coding!