How to implement multiple layouts using React router V4

There could have a number of layouts when engaged on huge tasks whereas creating a undertaking. We’re continuously pressured to divide our applications into items, every program with its distinctive format. There are quite a few events when a number of layouts are required for a web site.

What’s React Router?

React Router is a regular routing library for React.

Probably the most primary instance is when we have to separate the administration and consumer components of a web site, or when we have to change the web page format considerably for an unauthorized consumer. Furthermore, you possibly can hire React developers who specialised in working and fixing advanced issues in React.

On this article, We’ll present the right way to use a number of layouts in a React utility with out using redundant mountings with React Router v4.

Checkout This Additionally: React Hooks Best Practices in 2022

Putting in React Router Dom:

npm set up --save react-router-dom
Preliminary setup:

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import Router from "elements/router";

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

ReactDOM.render(<MyApp />, doc.getElementById("app"));

Instance:

Step 1:
To introduce a number of layouts or grasp pages to React, we’ll first assemble two distinct format recordsdata and their respective routes.

LoginPage.js:

We’ve constructed a customized part to function our first grasp web page or format, in addition to the route for the “LoginPageRoute” format. For any youngster elements that use this format, a toddler part might be rendered at kids, with the remainder of the weather remaining the identical.

DashboardLayout.js:

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

const DashboardLayout = ({kids, ...relaxation}) => {  
  return (  
    <div className="web page page-dashboard">  
      <div className="predominant">{kids}</div>  
    </div>  
  )  
}  

const DashboardLayoutRoute = ({part: Element, ...relaxation}) => {  
  return (  
    <Route {...relaxation} render={matchProps => (  
      <DashboardLayout>  
          <Element {...matchProps} />  
      </DashboardLayout>  
    )} />  
  )  
};  

export default DashboardLayout; 

We’ve made a customized part that can function our second grasp web page or format, in addition to a route for the format “DashboardLayout.”

On this instance, the ingredient beneath would be the similar for all Dashboard Structure youngster elements.

Step 2:
Within the subsequent stage, we’ll make two elements for every format. The primary format might be used for our first part, whereas the second format might be used for the second part.

LoginPageForm.js:

import React, { Element } from 'react';  
const LoginPageForm = ({  lessons }) => {  
    return (  
      <div className="col-md-6 col-md-offset-3">  
                <h2>Login</h2>  
                <type identify="type">  
                    <div className="form-group" >  
                        <label>Username</label>  
                        <enter kind="textual content" className="form-control" />  
                    </div>  
                    <div className="form-group" >  
                        <label>Password</label>  
                        <enter kind="password" className="form-control" />  
                    </div>                      
<div className="form-group">  
                        <button kind="submit" className="btn btn-primary">Login</button>  
                    </div>  
                </type>  
            </div>  
    );  
  };  

  export default LoginPageForm

Schedule an interview with React builders

UserPage.js:

import React, { Element } from 'react';  
const UserPage = ({  lessons }) => {  
    return (  
      <div>  
        <h2>Welcome Consumer</h2>  
      </div>  
    );  
  };  

  export default UserPage 

Output:

Structure 1

Structure 2

Conclusion:
As you possibly can see, altering the route renders varied grasp pages for distinct DOM elements. With React Router v4, we merely wrap our format part across the routes to leverage totally different layouts.

Thank for Studying. Hope you loved our article.

Rent top-notch React consultants from Bosc Tech for React improvement necessities.