Q:

why component is not rendered in parent layout in react JS using react routing?

I have two different layouts for front end and admin panel.Components for admin panel rendered correclty in admin layout but for front end it doesn't switch routes correctly and does not rendered in front end layout.
When i don't use exact property in index.js it is even doesn't work for admin panel routes as well.
I have consult this link as well
Nested Routes not rendering with React Router v4
but it doesn't work for me.
import Dashboard from "layouts/Dashboard/Dashboard.jsx";
import Login from "components/FrontEnd/Login";
import Frontend from  "layouts/Frontend/Frontend.jsx";
import AdminLogin from  "layouts/Dashboard/AdminAuth.jsx";

var indexRoutes = [

    { path: "/", name: "Frontend", component: Frontend , exactPro:true},
    { path: "/login", name: "FrontendLogin", component: Login , exactPro:false},
    { path: "/Admin", name: "Home", component: Dashboard, exactPro:false },
    { path: "/Admin-login", name: "AdminLogin", component: AdminLogin, exactPro:false}

];

export default indexRoutes;

Index.js
import React from "react";
import ReactDOM from "react-dom";
import { Router, Route, Switch } from 'react-router-dom'
import indexRoutes from "routes/index.jsx";
import { history } from './helper/history';
import store from "./redux/store/index";
import { Provider } from "react-redux";

ReactDOM.render(
    <Provider store={store}>
        <Router history={history} >
            <Switch>
              {indexRoutes.map((prop, key) => {
                return <Route exact={prop.exactPro}  path={prop.path} component={prop.component} key={key} />;
              })}
            </Switch>
        </Router>
    </Provider>,
  document.getElementById("root")
);

.......
import Dashboard from "components/Admin/Dashboard";
import UserProfile from "views/UserProfile/UserProfile";

const dashboardRoutes = [
  {
    path: "/Admin/dashboard",
    name: "Dashboard",
    icon: "pe-7s-graph",
    component: Dashboard,
    showMenu:true,
    showMenuFront:false,
    iconImagePath:dashboardIcon,
    permission:'both'
  },
  {
    path: "/Admin/user",
    name: "User Profile",
    icon: "pe-7s-user",
    component: UserProfile,
    showMenu:false,
    showMenuFront:false,
    permission:'both'
  },
  { redirect: true, path: "/Admin", to: "/Admin/dashboard", name: "Dashboard" }
];

export default dashboardRoutes;

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

export const AdminAuthRoute = ({ component: Component, ...rest }) => (
    <Route {...rest} render={(props, matchProps) => (
        localStorage.getItem('admin-user') 
        ? <Component {...props} {...matchProps} /> 
        : <Redirect to={{ pathname: '/Admin-login', state: { from: props.location } }} />
    )} />
)

..........
import React, { Component } from "react";
import {  Switch, Redirect } from "react-router-dom";
import dashboardRoutes from "routes/dashboard.jsx";
import {  AdminAuthRoute } from 'helper/PrivateRouteAdmin';

class DashboardPage extends Component {
  constructor(props) {
    super(props);
  }

  render() {

    return (
      <div className="wrapper">
        <div id="main-panel" className="main-panel" ref="mainPanel">
          <Switch>
            {
              dashboardRoutes.map((prop, key) => {
                console.log("prop redirect", prop.redirect);
                if (prop.redirect){
                  return <Redirect from={prop.path} to={prop.to} key={key} test="haha" />;
                }
                console.log('prop.path 111', prop.path);
                return (
                  <AdminAuthRoute   path={prop.path}  component={prop.component} key={key}  />
                );
              })
            }
          </Switch>
          <Footer />
        </div>
      </div>
    );
  }
}

export default Dashboard;

......
 import Home from "components/FrontEnd/Home";
    import HowItWorks from "components/FrontEnd/HowItWorks";
    import AboutUs from "components/FrontEnd/AboutUs";

    const FrontEndRoutes = [
      {
        path          : "/",
        name          : "Home",
        component     : Home,
        showMenu      : true,
        number        : 1
      },
      {
        path          : "/How_It_Works",
        name          : "How it works",
        component     : HowItWorks,
        showMenu      : true,
        number        : 2
      },
      {
        path          : "/About_Us",
        name          : "About Us",
        component     : AboutUs,
        showMenu      : true,
        number        : 3
      }
    ];

    export default FrontEndRoutes;

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

export const FrontEndAuthRoute = ({ component: Component, ...rest }) => (
    <Route {...rest} render={(props, matchProps) => (
        localStorage.getItem('music-director') 
        ? <Component {...props} {...matchProps} /> 
        : <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
    )} />
)

...............
import React, { Component } from "react";
import {  Switch, Redirect } from "react-router-dom";
import FrontEndRoutes from "routes/FrontEndRoutes.jsx";
import {  FrontEndAuthRoute } from 'helper/PrivateRouteFrontEnd';

class Frontend extends Component {
  constructor(props) {
    super(props);
  }
  render() {

    return (
      <div className="wrapper">
        <div id="main-panel" className="main-panel" ref="mainPanel">
          <Switch>
            {
              FrontEndRoutes.map((prop, key) => {
                if (prop.redirect){
                    return <Redirect from={prop.path} to={prop.to} key={key} test="haha" />;
                }
                return (
                    <FrontEndAuthRoute   path={prop.path}  component={prop.component} key={key}  />
                );

              })
            }
          </Switch>
        </div>
      </div>
    );
  }
}
export default Frontend;

A:

There are multiple things that you need to take care of while writing nested Routes

When you have nested Routes, you need to make sure that the parent route doesn't have an exact keyword. For instance, a route with path = '/' with child route /home won't render Home component on /home because the the top level itself  won't match.
You need to make sure that while writing Routes within the Switch component, the prefix route paths are at the start.

Considering the above points, the following changes will need to be made in your app
import Dashboard from "layouts/Dashboard/Dashboard.jsx";
import Login from "components/FrontEnd/Login";
import Frontend from  "layouts/Frontend/Frontend.jsx";
import AdminLogin from  "layouts/Dashboard/AdminAuth.jsx";

var indexRoutes = [

    { path: "/Admin-login", name: "AdminLogin", component: AdminLogin, exactPro:false}
    { path: "/login", name: "FrontendLogin", component: Login , exactPro:false},
    { path: "/Admin", name: "Home", component: Dashboard, exactPro:false },
    { path: "/", name: "Frontend", component: Frontend , exactPro:false},

];

export default indexRoutes;

import Home from "components/FrontEnd/Home";
import HowItWorks from "components/FrontEnd/HowItWorks";
import AboutUs from "components/FrontEnd/AboutUs";

const FrontEndRoutes = [
  {
    path          : "/How_It_Works",
    name          : "How it works",
    component     : HowItWorks,
    showMenu      : true
  },
  {
    path          : "/About_Us",
    name          : "About Us",
    component     : AboutUs,
    showMenu      : true
  },
  {
    path          : "/",
    name          : "Home",
    component     : Home,
    showMenu      : true
  },
];

export default FrontEndRoutes;

