in this article, you will learn how to add multiple layouts using the new version of React router v4. You will see complete details about React router and a step-by-step guide to implementing the multiple layouts using React router v4.

2. 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.

3. 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

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

5. 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.

6. 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;

7. 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.

8. 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

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

10. Output:
Layout 1
Layout 2

11. 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.