React js common layout with React Router

Question

I am using Ant Design for creating layout for my react application. I have created separate components for Header, SideBar, FooterComp and included them all in App.js. The code is as below:

import React from "react";
import { Layout } from "antd";
import "./App.css";

import { NavBar } from "./components/Header";
import { SideBar } from "./components/Sidebar";
import { FooterComp } from "./components/Footer";

const { Content } = Layout;

const App = () => {
  return (
    <Layout>
      <SideBar />
      <Layout className="site-layout">
        <NavBar />
        <Content
          className="site-layout-background"
          style={{
            margin: "24px 16px",
            padding: 24,
            minHeight: 487,
          }}
        >
          Content
        </Content>
        <FooterComp />
      </Layout>
    </Layout>
  );
};

export default App;

Now, I want to use React Router and render the components inside Content. How do I achieve that ? Also, I will be creating two more components i.e. for Login and Registration. I do not want layout to appear for these two components.

Hemanthvrm · Answer 1 · 2020-06-29T09:46:45.457

your react router(v5) should be in this format

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

import App from './components/App';
import Home from './components/home';

ReactDOM.render(
    <Router >
      <App>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/home" component={Home} />
        </Switch>
      </App>
    </Router>,
  document.querySelector('#root')
);

and inside your App component instead content use {props.children} to load home component, similarly you can add multiple routes with diff components

import React from "react";
import { Layout } from "antd";
import "./App.css";

import { NavBar } from "./components/Header";
import { SideBar } from "./components/Sidebar";
import { FooterComp } from "./components/Footer";

const { Content } = Layout;

const App = (props) => {
  return (
    <Layout>
      <SideBar />
      <Layout className="site-layout">
        <NavBar />
        <Content
          className="site-layout-background"
          style={{
            margin: "24px 16px",
            padding: 24,
            minHeight: 487,
          }}
        >
          {props.children}
        </Content>
        <FooterComp />
      </Layout>
    </Layout>
  );
};

export default App;

By default this layout gonna load for all logged in users..for registration and login pages.. check my answer in below thread, check if user authenticated , if not then in else condition u can load your login and registration components without the default(app) layout

How to implement authenticated routes in React Router 4?

React js common layout with React Router

1 Answers1