How to implement 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"; constMyApp = 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. import React, { Component } from 'react'; import { Route } from 'react-router-dom'; constDashboardLayout = ({children, ...rest}) => { return ( <div className="page page-dashboard"> <div className="main">{children}</div> </div> ) } constDashboardLayoutRoute = ({component: Component, ...rest}) => { return ( <Route {...rest} render={matchProps => ( <DashboardLayout> <Component {...matchProps} /> </DashboardLayout> )} /> ) }; export default DashboardLayout; DashboardLayout.js:

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. import React, { Component } from 'react'; constLoginPageForm = ({ 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="btnbtn-primary">Login</button> </div> </form> </div> ); }; export default LoginPageForm LoginPageForm.js:

9. UserPage.js: import React, { Component } from 'react'; constUserPage = ({ 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.