AdminLayoutComponent.js

import React from 'react';
import PropTypes from 'prop-types';
import { Redirect, Route } from 'react-router-dom';

import { Routes } from '@/common/constants';

import { Navbar } from '@/containers/navbar';

/* The component draws admin pages */

const AdminLayoutComponent = ({
    component: Component,
    isAdmin,
    isAuthenticated,
    path,
    ...restProps
}) => !isAdmin || !isAuthenticated
    ? <Redirect to={Routes.FEED} />
    :(
        <Route
            {...restProps}
            path={path}
            render={props => (
                <>
                    <Navbar />
                    <Component {...props} />
                </>
            )}
        />
    );


AdminLayoutComponent.propTypes = {
    component: PropTypes.oneOfType([
        PropTypes.node,
        PropTypes.func,
    ]).isRequired,
    isAdmin: PropTypes.bool.isRequired,
    isAuthenticated: PropTypes.bool.isRequired,
    path: PropTypes.string.isRequired,
};

export default AdminLayoutComponent;

App.js

<Switch>
  <AuthLayoutComponent
      component={LoginContainer}
      isAuthenticated={isAuthenticated}
      path={Routes.LOGIN}
  />
  <AuthLayoutComponent
      component={RegistrationContainer}
      isAuthenticated={isAuthenticated}
      path={Routes.REGISTER}
  />
  <CommonLayoutComponent
      component={FeedContainer}
      isAuthenticated={isAuthenticated}
      path={Routes.FEED}
  />
  <AdminLayoutComponent
      component={UsersBoardComponent}
      isAdmin={isAdmin}
      isAuthenticated={isAuthenticated}
      path={Routes.ADMIN_PANEL}
  />
  <Redirect
      from='*'
      to={Routes.FEED}
  />
</Switch>

AuthLayoutComponent.js

import React from 'react';
import PropTypes from 'prop-types';
import { Redirect, Route } from 'react-router-dom';

import { Routes } from '@/common/constants';

/* The component draws pages for authentication, if the user is not authorized.
   Otherwise, it redirects to the main page.
 */

const AuthLayoutComponent = ({
    component: Component,
    isAuthenticated,
    path,
    ...restProps
}) => isAuthenticated
    ? <Redirect to={Routes.FEED} />
    : (
        <Route
            {...restProps}
            path={path}
            render={props => <Component {...props} />}
        />
    );


AuthLayoutComponent.propTypes = {
    component: PropTypes.oneOfType([
        PropTypes.node,
        PropTypes.func,
    ]).isRequired,
    isAuthenticated: PropTypes.bool.isRequired,
    path: PropTypes.string.isRequired,
};

export default AuthLayoutComponent;

CommonLayoutComponent.js

import React from 'react';
import PropTypes from 'prop-types';
import { Redirect, Route } from 'react-router-dom';

import { Routes } from '@/common/constants';

import { Navbar } from '@/containers/navbar';

/* The component draws pages for all authorized users */

const CommonLayoutComponent = ({
    component: Component,
    isAuthenticated,
    path,
    ...restProps
}) => {
    return !isAuthenticated
        ? <Redirect to={Routes.LOGIN} />
        : (
            <Route
                {...restProps}
                path={path}
                render={props => (
                    <>
                        <Navbar />
                        <Component {...props} />
                    </>
                )}
            />
        );
};


CommonLayoutComponent.propTypes = {
    component: PropTypes.oneOfType([
        PropTypes.node,
        PropTypes.func,
    ]).isRequired,
    isAuthenticated: PropTypes.bool.isRequired,
    path: PropTypes.string.isRequired,
};

export default CommonLayoutComponent;