How to implement multiple layouts using React router V4?

There may have multiple layouts when working on massive projects while developing a project. We are frequently forced to divide our programs into pieces, each program with its unique layout. There are numerous occasions when multiple layouts are required for a website.

What is React Router?

React Router is a standard routing library for React.

The most basic example is when we need to separate the administration and client parts of a website, or when we need to change the page layout significantly for an unauthorized user. Moreover, you can hire React developers who specialized in operating and solving complex problems in React.

In this article, We’ll show how to use multiple layouts in a React application without utilizing redundant mountings with React Router v4.

Checkout This Also: React Hooks Best Practices in 2022

Installing React Router Dom:

npm install --save react-router-dom

Initial setup:

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"));

Example:

Step 1:

To introduce multiple layouts or master pages to React, we’ll first construct two distinct layout files and their respective routes.

LoginPage.js:

We’ve constructed a custom component to serve as our first master page or layout, as well as the route for the “LoginPageRoute” layout. For any child components that use this layout, a child component will be rendered at children, with the rest of the elements remaining the same.

DashboardLayout.js:

import React, { Component } from 'react';  
import { Route } from 'react-router-dom';  
  
const DashboardLayout = ({children, ...rest}) => {  
  return (  
    <div className="page page-dashboard">  
      <div className="main">{children}</div>  
    </div>  
  )  
}  
  
const DashboardLayoutRoute = ({component: Component, ...rest}) => {  
  return (  
    <Route {...rest} render={matchProps => (  
      <DashboardLayout>  
          <Component {...matchProps} />  
      </DashboardLayout>  
    )} />  
  )  
};  
  
export default DashboardLayout;  

We’ve made a custom component that will serve as our second master page or layout, as well as a route for the layout “DashboardLayout.”

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

Step 2:

In the next stage, we’ll make two components for each layout. The first layout will be used for our first component, while the second layout will be used for the second component.

LoginPageForm.js:

import React, { Component } from 'react';  
const LoginPageForm = ({  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 LoginPageForm

UserPage.js:

import React, { Component } from 'react';  
const UserPage = ({  classes }) => {  
    return (  
      <div>  
        <h2>Welcome User</h2>  
      </div>  
    );  
  };  
  
  export default UserPage  

Output:

 

 

 

 

 

Conclusion:

As you can see, altering the route renders various master pages for distinct DOM components. With React Router v4, we simply wrap our layout component around the routes to leverage different layouts.

Thank for Reading. Hope you enjoyed our article.

Hire top-notch React experts from Bosc Tech for React development requirements.