Multiple Layout In React Using React Router V4

Introduction

 

In this article, we will learn how to implement multiple layouts in React using React Router v4. Here, I will show you how we can create multiple layouts or master pages and use those layouts for different components using the React Router. And based on the route, these different layouts will be rendered in our React DOM.

 

What is React?

 

React is an open-source JavaScript library for building user interfaces of single-page applications. React is managed by Facebook.

 

What is React Router?

 

React Router is a standard routing library for React.

 

Step 1

 

In the first step, we will create two different layout files and their respective routes to implement multiple layouts or master pages to React.

 

Layout 1

 

Create a file named LoginLayout.js and paste the below code in the file.

import React, { Component } from 'react';
import { Route } from 'react-router-dom';

const LoginLayout = ({ children }) => (
    <div>
      <p>This is the First Layout</p>
      {children}
    </div>
  );

  const LoginLayoutRoute = ({component: Component, ...rest}) => {
    return (
      <Route {...rest} render={matchProps => (
        <LoginLayout>
            <Component {...matchProps} />
        </LoginLayout>
      )} />
    )
  };

export default LoginLayoutRoute;

Here, we have created a custom component that will be used as our first master page or layout, and also, we have created the route for the “LoginLayoutRoute” layout. 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.

 

In this case, the element below will be the same for all child components using Login Layout. 

<p>This is the First Layout</p>

Layout 2

 

Create a file named DashboardLayout.js and paste the below code in that file.

import React, { Component } from 'react';
import { Route } from 'react-router-dom';

const DashboardLayout = ({children, ...rest}) => {
  return (
    <div className="page page-dashboard">
      <div className="sidebar">This is the Second Layout</div>
      <div className="main">{children}</div>
    </div>
  )
}

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

export default DashboardLayoutRoute;

Here, we have created a custom component that will be used as our second master page or layout, and also, we have created a route for layout “DashboardLayoutRoute”.

In this case, the element below will be the same for all child components using Dashboard Layout.

<div className="sidebar">This is the Second Layout</div>

Step 2

 

In the second step, we will create two components for both layouts respectively. Our first component will use the first layout and the second one will use the second layout.

 

Component 1

 

Create a file named LoginPage.js and paste the below code.

import React, { Component } from 'react';
const LoginPage = ({  classes }) => {
    return (
      <div className="col-md-6 col-md-offset-3">
                <h2>Login</h2>
                <form name="form">
                    <div className="form-group" >
                        <label>Username</label>
                        <input type="text" className="form-control" />
                    </div>
                    <div className="form-group" >
                        <label>Password</label>
                        <input type="password" className="form-control" />
                    </div>
<div className="form-group">
                        <button type="submit" className="btn btn-primary">Login</button>
                    </div>
                </form>
            </div>
    );
  };

  export default LoginPage

Here, we have created the demo login page which will use the layout 1, i.e., Login Layout.

 

Component 2

 

Create a file named UserPage.js and paste the below code.

import React, { Component } from 'react';
const UserPage = ({  classes }) => {
    return (
      <div>
        <h2>Welcome User</h2>
      <span>Welcome the demo of multiple page this page is rendered using second layout</span>
      </div>
    );
  };

  export default UserPage

Here, we have created the demo Dashboard page which will use layout 2, i.e., Dashboard Layout.

 

Step 3

 

Now, update your App.js file to use both - the layout and the component - as below.

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom';

/** Layouts **/
import LoginLayoutRoute from "./LoginLayout";
import DashboardLayoutRoute from "./DashboardLayout";

/** Components **/
import UserPage from './UserPage';
import LoginPage from './LoginPage'

/*
   App
 */
class App extends Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route exact path="/">
            <Redirect to="/layout1" />
          </Route>
          <LoginLayoutRoute path="/layout1" component={LoginPage} />
          <DashboardRoute path="/layout2" component={UserPage} />
        </Switch>
      </Router>
    );
  }
}

export default App;

Here, we have updated the App.js file as defined in the route. When we route to /layout1, then LoginLayout (our first layout) will be used as the master page for the component Login page. On the other hand, when we route to /layout2, then our second layout, i.e., DashbaordLayout will be used as the master page for the component UserPage.

 

Here, our default layout is "/lauout1".

 

Now, run your app and you’ll be able to see the following output. This login page is using the first layout.

 

 

 

Now, change the route to /layout2 and you will be able to see the following output which is using the second layout.

 

 

Conclusion

 

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

 

Thanks to My Colleague friend Mr. Ajay Bhaskar to help me with this article.